Switch

Default

Generate a switch element easily with beautiful animations and functionality

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="active" />
    <s-switch v-model="active2" />
    <s-switch v-model="active3" disabled />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const active2 = ref(true)
const active3 = ref(false)
</script>

Color

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

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="active1" />
    <s-switch v-model="active2" color="success" />
    <s-switch v-model="active3" color="danger" />
    <s-switch v-model="active4" color="warn" />
    <s-switch v-model="active5" color="dark" />
    <s-switch v-model="active6" color="#7d33ff" />
    <s-switch v-model="active7" color="rgb(59,222,200)" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active1 = ref(true)
const active2 = ref(true)
const active3 = ref(true)
const active4 = ref(true)
const active5 = ref(true)
const active6 = ref(true)
const active7 = ref(true)
</script>

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

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="active"> Suscribe </s-switch>
    <s-switch v-model="active2">
      <template #off> Off </template>
      <template #on> On </template>
    </s-switch>
    <s-switch v-model="active3">
      <template #off> Default </template>
      <template #on> Premium </template>
    </s-switch>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const active2 = ref(false)
const active3 = ref(false)
</script>

Icons

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

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="active1">
      <template #off>
        <s-icon  name="bxs:volume-mute" />
      </template>
      <template #on>
        <s-icon  name="bxs:volume-full" />
      </template>
    </s-switch>
    <s-switch v-model="active2" color="danger">
      <s-icon  name="bxs:microphone" />
    </s-switch>
    <s-switch v-model="active3" color="success">
      <template #off>
        <s-icon  name="bx:x" />
      </template>
      <template #on>
        <s-icon  name="bx:check" />
      </template>
    </s-switch>
    <s-switch v-model="active4" color="warn">
      <template #off>
        <s-icon  name="bxs:plane-alt" />
      </template>
      <template #on> Active </template>
    </s-switch>
    <s-switch v-model="active5" color="dark">
      <template #circle>
        <s-icon v-if="!active5"  name="bxs:moon" />
        <s-icon v-else  name="bxs:sun" />
      </template>
    </s-switch>
    <s-switch v-model="active6" color="#7d33ff" icon>
      <template #circle>
        <s-icon v-if="active6"  name="bxl:instagram-alt" />
        <s-icon v-else  name="bxl:instagram" />
      </template>
    </s-switch>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active1 = ref(false)
const active2 = ref(false)
const active3 = ref(false)
const active4 = ref(false)
const active5 = ref(false)
const active6 = ref(false)
</script>

Loading New

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

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="activeLoading"> Active Loading </s-switch>
    <s-switch v-model="active2" :loading="activeLoading" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeLoading = ref(true)
const active2 = ref(false)
</script>

Indeterminate New

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

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="active" indeterminate />
    <s-switch v-model="active2" indeterminate />
    <s-switch v-model="active3" indeterminate disabled />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const active2 = ref(true)
const active3 = ref(false)
</script>

Square New

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

Code copied

<template>
  <div class="center con-switch">
    <s-switch v-model="active" shape="square" />
    <s-switch v-model="active2" shape="square" />
    <s-switch v-model="active3" shape="square" disabled />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const active2 = ref(true)
const active3 = ref(false)
</script>

Example

A usual example when using the switch component

Code copied

<template>
  <div class="center con-switch">
    <ul>
      <li>
        <p>Email messages</p>
        <s-switch v-model="active1" />
      </li>
      <li>
        <p>Change theme</p>
        <s-switch v-model="active2">
          <template #circle>
            <s-icon v-if="!active2"  name="bxs:moon" />
            <s-icon v-else  name="bxs:sun" />
          </template>
        </s-switch>
      </li>
      <li>
        <p>Desktop notifications</p>
        <s-switch v-model="active3">
          <s-icon  name="bxs:message" />
        </s-switch>
      </li>
      <li>
        <p>Type of user</p>
        <s-switch v-model="active4">
          <template #on> Admin </template>
          <template #off> Default </template>
        </s-switch>
      </li>
      <li>
        <p>Allow to send test data to improve this product</p>
        <s-switch v-model="active5" color="success">
          <template #off>
            <s-icon  name="bx:x" />
          </template>
          <template #on>
            <s-icon  name="bx:check" />
          </template>
        </s-switch>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active1 = ref(true)
const active2 = ref(false)
const active3 = ref(false)
const active4 = ref(true)
const active5 = ref(true)
</script>

<style lang="scss" scoped>
.con-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  ul {
    width: 100%;
    padding: 0px;
    li {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px;
      p {
        margin: 0px;
        font-size: 0.85rem;
      }
    }
  }
  .s-switch {
    margin: 5px;
  }
}
</style>

API