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

Generate a switch element easily with beautiful animations and functionality

Code copied

# Color

Change the color of the component when it is in active state, the allowed values ​​are (main colors of vuesax, RGB, HEX)

Code copied

# Text

Add a text to the switch with the default slot or if you need a different text for each state of the component you can use the on or off slots

Self-adjusting

The component conforms to the text to be displayed by the state in which it is located

Suscribe
Suscribe
On
Off
Premium
default
Code copied

# Icons

Add icons to the component in the default slot or the on or off status slots

Active
Code copied

# Array Value New

You can use the checkbox to add or remove a value from an array, that value is the val property

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

# Loading New

Add a loading animation to the component with the loading property, the property is aboolean so you can add it without any value.

Active Loading
Active Loading
Code copied

# Indeterminate New

Add an undetermined state to the compound with the indeterminate property, the property is aboolean so you can add it without any value.

Code copied

# Square New

Change the circular style to square with the square property, the property is aboolean so you can add it without any value.

Code copied

# Example

A usual example when using the switch component

  • 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 Determine the value of the component and if it is an array add or remove the value. 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 Change the default value of boolean to the string to use it being an array on 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 Vuesax main colors RGB y HEX Change the color of the component when it is in active state. 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 Add a loading animation to the component. 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 Determine if the component is in an undetermined state (being in this state is 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 Change the style of the component from circular to square. 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 Change the style of the circle by making it transparent (used when adding the 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 Determine the return value of the component when inactive.

slots

Property Type Values Description default Example More
default slot Add text within the component. 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 Add text within the component when it is in active state. 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 Add text within the component when it is in idle state. 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 Add an icon to the circle within the component. 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: 1/24/2020, 9:21:03 PM

Select