Select

# Select

# 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 elemento select con el componente vs-select y el sub componente vs-option

Code copied

# Color

Cambie el color del componente con la propiedad color, los valores permitidos son los colores principales de vuesax y los colores (RGB y HEX)

Code copied

# Label

Agrega un label al select fácilmente con la propiedad label, tambien puedes agregar un label-placeholder que como su nombre lo dice es un placeholder que se anima a label, y por ultimo el placeholder con la propiedad placeholder

Code copied

# Group

Agrupa opciones dentro de el select con el sub-componente vs-option-group, como slot requerido es el de title para agregar un titulo al grupo de items

Code copied

# Filter New

Puedes agregar la funcionalidad de filtrar opciones con la propiedad filter, esta propiedad es un boolean por lo que puedes agregarla sin ningún valor

Code copied

# Multiple

Agrega la funcionalidad de multiple selección de opciones con la propiedad multiple, esta propiedad es un boolean por lo que puedes agregarla sin ningún valor

El valor de el select debe ser un array

Code copied

# Loading New

Agrega una animación de loading al select con la propiedad loading, esta propiedad es un boolean por lo que puedes agregarla sin ningún valor

Code copied

# State New

Cambia el estilo de el componente al color pasado en la propiedad state, los colores permitidos son solo los principales de vuesax

Esta propiedad puede usarse para indicar al usuario un error algún campo que falta o cuando algo esta listo

Code copied

# Message New

Agrega un elemento debajo de el select mostrando un mensaje al usuario

Option Valid
Required
Select your country where you are currently
Code copied

# API

props

Property Type Values Description default Example More
color String Colores principales de vuesax RGB HEX Cambia el color de el componente. primary Usage Open Close 
<template>
  <div class="center con-selects">
    <vs-select
      v-for="(color, i) in colors"
      :key="i"
      :color="color.color"
      placeholder="Select"
      v-model="color.value"
    >
      <vs-option label="Vuesax" value="1">
        Vuesax
      </vs-option>
      <vs-option label="Vue" value="2">
        Vue
      </vs-option>
      <vs-option label="Javascript" value="3">
        Javascript
      </vs-option>
      <vs-option label="Sass" value="4">
        Sass
      </vs-option>
      <vs-option label="Typescript" value="5">
        Typescript
      </vs-option>
      <vs-option label="Webpack" value="6">
        Webpack
      </vs-option>
      <vs-option label="Nodejs" value="7">
        Nodejs
      </vs-option>
    </vs-select>
  </div>
</template> <script> export default {
  data:() => ({
    colors: [
      {
        color: 'danger',
        value: '1'
      },
      {
        color: 'success',
        value: '2'
      },
      {
        color: 'warn',
        value: '3'
      },
      {
        color: 'dark',
        value: '4'
      },
      {
        color: '#7d33ff',
        value: '5'
      },
      {
        color: 'rgb(59,222,200)',
        value: '6'
      },

    ]
  })
} </script>
loading Boolean true false Determina si el componente se encuentra en estado loading y agrega una animación. false Usage Open Close 
<vs-select
  placeholder="Success"
  v-model="value1"
  loading
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
placeholder String String Agrega un placeholder al componente. Usage Open Close 
<vs-select placeholder="Select" v-model="value">
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option disabled label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
label String String Agrega un label al componete select. Usage Open Close 
<vs-select
  label="Label"
  v-model="value1"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
label-placeholder String String Agrega un placeholder que al estar en focus o con valor se convierte en un label. Usage Open Close 
<vs-select
  label-placeholder="Label-placeholder"
  v-model="value2"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
filter Boolean true false Agrega la funcionalidad de filtrar las opciones de el select. false Usage Open Close 
<vs-select
  filter
  placeholder="Filter"
  v-model="value"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
multiple Boolean true false Agrega la funcionalidad de poder seleccionar varias opciones de un select. false Usage Open Close 
<vs-select
  label="Multiple"
  multiple
  placeholder="Filter"
  v-model="value"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
state String Colores principales de Vuesax Cambia el estado de el componete al color proporcionado. false Usage Open Close 
<vs-select
  v-for="(color, i) in colors"
  :key="i"
  :state="color.color"
  :label="color.color"
  placeholder="Select"
  v-model="color.value"
  >
    <vs-option label="Vuesax" value="1">
      Vuesax
    </vs-option>
    <vs-option label="Vue" value="2">
      Vue
    </vs-option>
    <vs-option label="Javascript" value="3">
      Javascript
    </vs-option>
    <vs-option label="Sass" value="4">
      Sass
    </vs-option>
    <vs-option label="Typescript" value="5">
      Typescript
    </vs-option>
    <vs-option label="Webpack" value="6">
      Webpack
    </vs-option>
    <vs-option label="Nodejs" value="7">
      Nodejs
    </vs-option>
    </vs-select>
  </div>
</template>
disabled Boolean true false Determina si el componente se encuentra en estado de disabled. false Open Close 
<vs-select
  disabled
  placeholder="Success"
  v-model="value1"
>
  <template #message-success>
    Option Valid
  </template>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
collapse-chips Boolean true false Determina si los chips en multiple se reducen a 2 elementos. false Usage Open Close 
<vs-select
  label="Multiple collapse chips"
  filter
  multiple
  collapse-chips
  placeholder="Collapse chips"
  v-model="value3"
>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>

slots

Property Type Values Description default Example More
message-{color} slot Agrega un mensaje debajo de el select. Usage Open Close 
<vs-select
  placeholder="Success"
  v-model="value1"
>
  <template #message-success>
    Option Valid
  </template>
  <vs-option label="Vuesax" value="1">
    Vuesax
  </vs-option>
  <vs-option label="Vue" value="2">
    Vue
  </vs-option>
  <vs-option label="Javascript" value="3">
    Javascript
  </vs-option>
  <vs-option label="Sass" value="4">
    Sass
  </vs-option>
  <vs-option label="Typescript" value="5">
    Typescript
  </vs-option>
  <vs-option label="Webpack" value="6">
    Webpack
  </vs-option>
  <vs-option label="Nodejs" value="7">
    Nodejs
  </vs-option>
</vs-select>
title slot Al componente vs-option-group le agrega un titulo al grupo de opciones. Usage Open Close 
<vs-select
  label="Group"
  placeholder="Group"
  v-model="value1"
>
  <vs-option-group>
    <div slot="title">
      Vuejs
    </div>
    <vs-option label="Vuesax" value="1">
      Vuesax
    </vs-option>
    <vs-option label="Vue" value="2">
      Vue
    </vs-option>
    <vs-option label="Javascript" value="3">
      Javascript
    </vs-option>
  </vs-option-group>
  <vs-option-group>
    <div slot="title">
      Others
    </div>
    <vs-option label="Sass" value="4">
      Sass
    </vs-option>
    <vs-option label="Typescript" value="5">
      Typescript
    </vs-option>
    <vs-option label="Webpack" value="6">
      Webpack
    </vs-option>
    <vs-option label="Nodejs" value="7">
      Nodejs
    </vs-option>
  </vs-option-group>
</vs-select>
Last Updated: 30/1/2020 8:38:50

Avatar