Switch

# Switch

# 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

Genera un elemento switch fácilmente con hermosas animaciones y funcionalidad

Code copied

# Color

Cambia el color de el componete cuando se encuentra en estado de activo, los valores permitidos son (colores principales de vuesax, RGB, HEX)

Code copied

# Text

Agrega un texto al switch con el slot default o si necesitas un texto diferente para cada estado de el componente puedes usar los slots on o off

Autoajustable

El componente se ajusta al texto que va a mostrar por el estado en el que se encuentre

Suscribe
Suscribe
On
Off
Premium
default
Code copied

# Icons

Agrega iconos al componente en el slot default o los slots de stados on o off

Active
Code copied

# Array Value New

Puedes usar el checkbox para agregar o eliminar un valor de un array, ese valor es la propiedad val

Html
Html
Css
Css
Javascript
Javascript
Vue
Vue
Vuesax
Vuesax
[ "javascript", "vue" ]
Code copied

# Loading New

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

Active Loading
Active Loading
Code copied

# Indeterminate New

Agrega un estado de indeterminado al componete con la propiedad indeterminate, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Code copied

# Square New

Cambia el estilo circular a cuadrado con la propiedad square, la propiedad es un boolean por lo que puedes agregarla sin ningún valor.

Code copied

# Example

Un ejemplo usual al usar el componente switch

  • Email messages

  • Change theme

  • Desktop notifications

  • Type of user

    Admin
    Default

  • Allow to send test data to improve this product

Code copied

# API

props

Property Type Values Description default Example More
v-model boolean, Array boolean Array Determina el valor de el componente y si es un array agrega o elimina el valor. Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch v-model="active" />
    <vs-switch v-model="active2" />
    <vs-switch v-model="active3" disabled />
  </div>
</template>
val string string Cambia el valor por defecto de boolean al string para usarlo el ser un array el v-model. Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch val="html" v-model="options">
      Html
    </vs-switch>
    <vs-switch val="css" v-model="options">
      Css
    </vs-switch>
    <vs-switch val="javascript" v-model="options">
      Javascript
    </vs-switch>
    <vs-switch val="vue" v-model="options">
      Vue
    </vs-switch>
    <vs-switch val="vuesax" v-model="options">
      Vuesax
    </vs-switch>

    <span class="data">
      {{ options }}
    </span>
  </div>
</template>
color String Colores principales de vuesax RGB y HEX Cambia el color de el componente cuando esta en estado de activo. primary Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch v-model="active1" />
    <vs-switch success v-model="active2" />
    <vs-switch danger v-model="active3" />
    <vs-switch warn v-model="active4" />
    <vs-switch dark v-model="active5" />
    <vs-switch color="#7d33ff" v-model="active6" />
    <vs-switch color="rgb(59,222,200)" v-model="active7" />
  </div>
</template>
loading boolean true false Agrega una animación de cargando al componete. false Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch v-model="activeLoading">
      Active Loading
    </vs-switch>
    <vs-switch :loading="activeLoading" v-model="active2" />
  </div>
</template> <script> export default {
  data:() => ({
    activeLoading: true,
    active2: false
  }),
} </script>
indeterminate boolean truefalse Determina si el componente se encuentra en un estado de indeterminado (al estar en este estado se encuentra en disabled). false Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch indeterminate v-model="active" />
    <vs-switch indeterminate v-model="active2" />
    <vs-switch indeterminate v-model="active3" disabled />
  </div>
</template>
Square Boolean truefalse Cambia el estilo de el componente de circular a cuadrado. false Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch square v-model="active" />
    <vs-switch square v-model="active2" />
    <vs-switch square v-model="active3" disabled />
  </div>
</template>
icon boolean truefalse Cambia el estilo de el circulo volviéndolo transparente (se usa cuando se agrega el slot="circle"). false Usage Open Close 
<vs-switch color="#7d33ff" icon v-model="active6">
  <template #circle>
      <i v-if="active6" class='bx bxl-instagram-alt'></i>
      <i v-else class='bx bxl-instagram' ></i>
  </template>
</vs-switch>
notValue String String Determina el valor de retorno de el componente al estar inactivo.

slots

Property Type Values Description default Example More
default slot Agrega un texto dentro de el componente. Usage Open Close 
<template>
  <div class="center con-switch">
    <vs-switch v-model="active">
      Suscribe
    </vs-switch>
    <vs-switch v-model="active2">
      <template #off>
          Off
      </template>
      <template #on>
          On
      </template>
    </vs-switch>
    <vs-switch v-model="active3">
      <template #off>
          default
      </template>
      <template #on>
          Premium
      </template>
    </vs-switch>
  </div>
</template>
on slot Agrega un texto dentro de el componente cuando esta en estado activo. Usage Open Close 
<vs-switch v-model="active1">
  <template #off>
      <i class='bx bxs-volume-mute' ></i>
  </template>
  <template #on>
      <i class='bx bxs-volume-full' ></i>
  </template>
</vs-switch>
off slot Agrega un texto dentro de el componente cuando esta en estado inactivo. Usage Open Close 
<vs-switch v-model="active1">
  <template #off>
      <i class='bx bxs-volume-mute' ></i>
  </template>
  <template #on>
      <i class='bx bxs-volume-full' ></i>
  </template>
</vs-switch>
circle slot Agrega un icono al circulo dentro de el componente. Usage Open Close 
<vs-switch color="#7d33ff" icon v-model="active6">
  <template #circle>
      <i v-if="active6" class='bx bxl-instagram-alt'></i>
      <i v-else class='bx bxl-instagram' ></i>
  </template>
</vs-switch>
Last Updated: 24/1/2020 21:21:03

Select