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