Input

# Input

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

agrega un elements input facilitate con el componente <vs-input>

Code copied

# Label

Agrega un label al input con la propiedad label

Code copied

# Label Placeholder

Puedes tener un placeholder con una animación genial al estar o en focus o con un valor convirtiéndose en un label arriba de el input con la propiedad label-placeholder

Code copied

# Color

Cambia el color de el componente y agrega un border abajo con la propiedad color, los valores permitidos son los colores principales de vuesax y los colores (RGB y HEX)

Code copied

# icon

Agrega un icono al input fácilmente con el slot icon si quieres que el icono este antes de el input puedes hacerlo con la propiedad icon-before

Iconos por defecto

Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Code copied

# Message New

Puedes agregar un mensaje debajo de el input con el slot="message-{vuesax color}" para informar que falta un campo o es erróneo el valor

Email Valid
Required
Insecure password
Code copied

# State New

Cambia el color de el input para algún estado, los estados permitidos son (primary, success, danger, warn, dark)

Code copied

# Progress New

Agrega una barra de progreso de validación, lo mas común es su uso para validar contraseñas y datos correctos dentro de el input, su valor es de (0 - 100).

En el ejemplo se valida que la contraseña tenga por lo menos

  • Un carácter especial
  • Mas de 6 dígitos
  • Una letra minúscula
  • Una letra mayúscula
  • Un numero
Code copied

# Loading New

Agrega una animación de loading al input con la propiedad loading, la propiedad es un booleano, por lo que puede agregarlo sin ningún valor.

Code copied

# Input types

Cambia el tipo de input con la propiedad type como un input nativo de html, el valor por defecto es text

Code copied

# Border New

Cambia todo es estilo de el componente con la propiedad border, la propiedad es un booleano, por lo que puede agregarlo sin ningún valor.

Code copied

# Shadow New

Cambia todo es estilo de el componente con la propiedad shadow, la propiedad es un booleano, por lo que puede agregarlo sin ningún valor.

Code copied

# API

props

Property Type Values Description default Example More
placeholder String String Agrega un placeholder al input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input v-model="value" placeholder="Name" />
  </div>
</template>
label String String Agrega un label arriba del componente. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      label="Name"
      v-model="value"
      placeholder="Evan You"
    />
  </div>
</template>
label-placeholder String String Agrega un placeholder convierte al estar en focus en un label. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      label-placeholder="Country"
      v-model="value"
    />
  </div>
</template>
color string vuesax colorsRGBHEX Cambia el color del componente. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      primary
      v-model="value"
      placeholder="Primary" />

    <vs-input
      success
      v-model="value2"
      placeholder="Success" />

    <vs-input
      danger
      v-model="value3"
      placeholder="Danger" />

    <vs-input
      warn
      v-model="value4"
      placeholder="Warn" />

    <vs-input
      dark
      v-model="value5"
      placeholder="Dark" />

    <vs-input
      color="#7d33ff"
      v-model="value6"
      placeholder="HEX" />

    <vs-input
      color="rgb(59,222,200)"
      v-model="value7"
      placeholder="HEX" />
  </div>
</template>
state String vuesax colorsRGBHEX Cambia el color de fondo de el componente cambiando su estado. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      primary
      v-model="value"
      state="primary"
      placeholder="Primary" />

    <vs-input state="success" success v-model="value2" placeholder="Success Icon">
      <template #icon>
        <i class='bx bx-user'></i>
      </template>
    </vs-input>

    <vs-input state="danger" danger icon-after v-model="value2" placeholder="Danger icon after">
      <template #icon>
        <i class='bx bx-mail-send' ></i>
      </template>
    </vs-input>

    <vs-input
      warn
      state="warn"
      v-model="value4"
      placeholder="Label Warn"
      label="Warn" />

    <vs-input
      dark
      state="dark"
      v-model="value5"
      label-placeholder="Dark" />
  </div>
</template>
progress number 0 - 100 Agrega una barra de progreso iniciando en rojo y terminando en verde. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      type="password"
      v-model="value"
      label-placeholder="Password"
      :progress="getProgress"
      :visiblePassword="hasVisiblePassword"
      icon-after
      @click-icon="hasVisiblePassword = !hasVisiblePassword">
      <template #icon>
        <i v-if="!hasVisiblePassword" class='bx bx-show-alt'></i>
        <i v-else class='bx bx-hide'></i>
      </template>

      <template v-if="getProgress >= 100" #message-success>
        Secure password
      </template>

    </vs-input>
  </div>
</template> <script>
  export default {
    data:() => ({
      value: '',
      hasVisiblePassword: false
    }),
    computed: {
      getProgress() {
        let progress = 0

        // at least one number

        if (/\d/.test(this.value)) {
          progress += 20
        }

        // at least one capital letter

        if (/(.*[A-Z].*)/.test(this.value)) {
          progress += 20
        }

        // at menons a lowercase

        if (/(.*[a-z].*)/.test(this.value)) {
          progress += 20
        }

        // more than 5 digits

        if (this.value.length >= 6) {
          progress += 20
        }

        // at least one special character

        if (/[^A-Za-z0-9]/.test(this.value)) {
          progress += 20
        }

        return progress
      }
    }
  }
  </script>
loading boolean boolean agrega una animación de loading al input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input loading v-model="value" placeholder="Name" />
  </div>
</template>
type string html type Cambia el tipo de input (valores html). Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      type="text"
      v-model="value1"
      label="Text"
    />
    <vs-input
      type="password"
      v-model="value2"
      label="Password"
    />
    <vs-input
      type="search"
      v-model="value3"
      label="Search"
    />
    <vs-input
      type="number"
      v-model="value4"
      label="Number"
    />
    <vs-input
      type="url"
      v-model="value5"
      label="Url"
    />
    <vs-input
      type="time"
      v-model="value6"
      label="time"
    />
    <vs-input
      type="date"
      v-model="value7"
      label="Date"
    />
  </div>
</template>
border boolean boolean Cambia el estilo de el componente. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input border v-model="value" placeholder="Name" />

    <vs-input color="#7d33ff" border type="password" v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>

    <vs-input border warn type="email" icon-after v-model="value3" label-placeholder="Address">
      <template #icon>
        <i class='bx bxl-bitcoin'></i>
      </template>
    </vs-input>
  </div>
</template>
shadow boolean boolean Cambia el estilo de el componente. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input shadow v-model="value" placeholder="Name" />

    <vs-input color="#7d33ff" shadow type="password" v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>

    <vs-input shadow warn type="email" icon-after v-model="value3" label-placeholder="Address">
      <template #icon>
        <i class='bx bxl-bitcoin'></i>
      </template>
    </vs-input>
  </div>
</template>
icon-after boolean boolean Pone el icono después de el input. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input type="password" icon-after v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>
  </div>
</template>
visible-password boolean boolean Si el input es de tipo password se modifica para mostrar la contraseña. false Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input
      type="password"
      v-model="value"
      label-placeholder="Password"
      :progress="getProgress"
      :visiblePassword="hasVisiblePassword"
      icon-after
      @click-icon="hasVisiblePassword = !hasVisiblePassword">
      <template #icon>
        <i v-if="!hasVisiblePassword" class='bx bx-show-alt'></i>
        <i v-else class='bx bx-hide'></i>
      </template>

      <template v-if="getProgress >= 100" #message-success>
        Secure password
      </template>

    </vs-input>
  </div>
</template>

slots

Property Type Values Description default Example More
icon Slot Agrega un icono al input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input v-model="value1" placeholder="User name">
      <template #icon>
        <i class='bx bx-user'></i>
      </template>
    </vs-input>

    <vs-input type="password" icon-after v-model="value2" placeholder="Password">
      <template #icon>
        <i class='bx bx-lock-open-alt'></i>
      </template>
    </vs-input>
  </div>
</template>
message Slot Agrega un texto informativo debajo de el input. Usage Open Close 
<template>
  <div class="center content-inputs">
    <vs-input v-model="value1" placeholder="Email">
      <template #message-success>
        Email Valid
      </template>
    </vs-input>

    <vs-input v-model="value2" placeholder="Name">
      <template #message-danger>
        Required
      </template>
    </vs-input>

    <vs-input type="password" v-model="value3" placeholder="Password">
      <template #message-warn>
        Insecure password
      </template>
    </vs-input>

    <vs-input v-model="value4" label="Example Regex Validation" placeholder="vuesax@gmail.com">
      <template v-if="validEmail" #message-success>
        Email Valid
      </template>
      <template v-if="!validEmail && value4 !== ''" #message-danger>
        Email Invalid
      </template>
    </vs-input>
  </div>
</template>
Last Updated: 18/1/2020 15:03:45

Checkbox