# Input

<template lang="html">
  <div class="centerx default-input">
     <vs-input class="inputx" placeholder="Placeholder" v-model="value1"/>
     <vs-input disabled class="inputx" placeholder="Disabled" v-model="value2"/>
   </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:''
    }
  }
}
</script>

<style lang="stylus">
.default-input
  .inputx
    margin 10px
</style>

<template lang="html">
  <div class="centerx labelx">
    <vs-input label="Name" placeholder="Placeholder" v-model="value1"/>
    <vs-input type="password" label="Password" placeholder="Disabled" v-model="value2"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:''
    }
  }
}
</script>

<style lang="stylus">
  .labelx
    .vs-input
      margin 10px;
</style>

<template lang="html">
  <div class="centerx">
    <vs-input label-placeholder="Label-placeholder" v-model="value1"/>
    <vs-input disabled="true" label-placeholder="Label-placeholder-disabled" v-model="value2"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:''
    }
  }
}
</script>

<template lang="html">
  <div class="centerx icons-example">
    <vs-input icon="search" placeholder="Search" v-model="value1"/>
    <vs-input icon-after="true" label-placeholder="icon-after" icon="mode_edit" placeholder="Nombre" v-model="value2"/>
    <vs-input icon="add" label-placeholder="Label-placeholder" v-model="value3"/>
    <vs-input icon-after="true"  icon="shopping_cart" label-placeholder="Label-placeholder" v-model="value4"/>
    <vs-input disabled="true" icon="error_outline" label-placeholder="icon-disabled" v-model="value5"/>
    <vs-input icon-after="true" disabled="true" icon="email" label-placeholder="icon-disabled" v-model="value6"/>
    <vs-input icon-no-border icon="account_circle" label-placeholder="icon-no-border" v-model="value7"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      value6:'',
      value7:'',
      value8: ''
    }
  }
}
</script>

<style lang="stylus">
.icons-example
  .vs-input
    margin 15px
</style>

<template lang="html">
  <div class="centerx colors-example">
    <vs-input label-placeholder="Default" v-model="value1"/>
    <vs-input color="success" label-placeholder="Success" v-model="value2"/>
    <vs-input color="danger" label-placeholder="Danger" v-model="value3"/>
    <vs-input color="warning" label-placeholder="Warning" v-model="value4"/>
    <vs-input color="dark" label-placeholder="Dark" v-model="value5"/>
    <vs-input color="rgb(213, 14, 151)" label-placeholder="RGB: rgb(213, 14, 151)" v-model="value6"/>
    <vs-input color="#11e988" label-placeholder="HEX: #11e988" v-model="value7"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
      value5:'',
      value6:'',
      value7:''
    }
  }
}
</script>

<style lang="stylus">
.colors-example
  .vs-input
    margin 5px
    margin-top 20px;
</style>

<template lang="html">
  <div>
    <vs-input
      :success="true"
      success-text="The mail is valid"
      placeholder="Email Success"
      v-model="value1"/>
      <vs-input
      :danger="true"
      danger-text="The password does not meet the standards"
      placeholder="Password Danger"
      v-model="value2"/>
      <vs-input
      :warning="true"
      warning-text="The entered data could not be verified"
      placeholder="Date Warning"
      v-model="value3"/>
      <vs-input
      description-text="Just enter the first two numbers of your phone"
      placeholder="Phone Description"
      v-model="value4"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:'',
      value4:'',
    }
  }
}
</script>

<style lang="css" scoped>
  pre {
    width: 100%;
    color: rgba(255, 255, 255,.8);
  }
</style>

<template lang="html">
  <div class="size-example">
    <vs-input size="large" placeholder="Size large" v-model="value1" />
    <vs-input size="default" placeholder="Size default" v-model="value2" />
    <vs-input size="small" placeholder="Size small" v-model="value3" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      value1:'',
      value2:'',
      value3:''
    }
  }
}
</script>

<style lang="stylus">
.size-example
  .vs-input
    margin 6px;
</style>