Switch ​

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

const value = ref(false)
</script>

<template>
  <ASwitch v-model="value" />
</template>

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

const primary = ref(true)
const success = ref(true)
const info = ref(true)
const warning = ref(true)
const danger = ref(true)
</script>

<template>
  <div class="flex flex-wrap gap-6">
    <ASwitch
      v-model="primary"
      color="primary"
    />
    <ASwitch
      v-model="success"
      color="success"
    />
    <ASwitch
      v-model="info"
      color="info"
    />
    <ASwitch
      v-model="warning"
      color="warning"
    />
    <ASwitch
      v-model="danger"
      color="danger"
    />
  </div>
</template>

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

const emailNotifications = ref(false)
const pushNotifications = ref(false)
const mobileNotifications = ref(false)
</script>

<template>
  <div class="grid-row place-items-stretch">
    <ASwitch
      v-model="emailNotifications"
      label="Email notifications"
    />
    <ASwitch
      v-model="pushNotifications"
      label="Push notifications"
    />
    <ASwitch
      v-model="mobileNotifications"
      label="Mobile notifications"
    />
  </div>
</template>

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

const notifications = ref(true)
const value = ref(true)
const volume = ref(true)
const isMicOff = ref(false)
const threat = ref(false)
</script>

<template>
  <div class="flex flex-wrap gap-6">
    <ASwitch
      v-model="notifications"
      on-icon="i-bx-bell"
      off-icon="i-bx-bell-off"
    />
    <ASwitch
      v-model="value"
      on-icon="i-bx-check"
      off-icon="i-bx-x"
      color="success"
    />
    <ASwitch
      v-model="volume"
      on-icon="i-bx-volume-full"
      off-icon="i-bx-volume-mute"
      color="info"
    />
    <ASwitch
      v-model="isMicOff"
      on-icon="i-bx-microphone-off"
      off-icon="i-bx-microphone"
      color="warning"
    />
    <ASwitch
      v-model="threat"
      on-icon="i-bx-bug"
      off-icon="i-bx-check-shield"
      color="danger"
    />
  </div>
</template>

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

const enabledNotifications = ref([])
</script>

<template>
  <div class="grid-row place-items-stretch">
    <ASwitch
      v-model="enabledNotifications"
      value="accountActivity"
      label="accountActivity"
    />
    <ASwitch
      v-model="enabledNotifications"
      value="comment"
      label="comment"
    />
    <ASwitch
      v-model="enabledNotifications"
      value="like"
      label="like"
    />
    <ASwitch
      v-model="enabledNotifications"
      value="mention"
      label="mention"
    />
    <ASwitch
      v-model="enabledNotifications"
      value="follow"
      label="follow"
    />

    <p>Enabled Notifications: {{ enabledNotifications }}</p>
  </div>
</template>

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

const status = ref('enabled')
</script>

<template>
  <div class="grid-row">
    <ASwitch
      v-model="status"
      on-value="enabled"
      off-value="disabled"
    />
    <span>Status: "{{ status }}"</span>
  </div>
</template>

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

const xs = ref(false)
const sm = ref(false)
const base = ref(false)
const lg = ref(false)
const xl = ref(false)
const xxl = ref(false)
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <ASwitch
      v-model="xs"
      class="text-xs"
    />
    <ASwitch
      v-model="sm"
      class="text-sm"
    />
    <ASwitch v-model="base" />
    <ASwitch
      v-model="lg"
      class="text-lg"
    />
    <ASwitch
      v-model="xl"
      class="text-xl"
    />
    <ASwitch
      v-model="xxl"
      class="text-2xl"
    />
  </div>
</template>

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

const on = ref(true)
const off = ref(false)
const onDisable = ref(true)
const offDisable = ref(false)
</script>

<template>
  <div class="grid-row place-items-stretch">
    <ASwitch
      v-model="on"
      :label="on ? 'On' : 'Off'"
    />
    <ASwitch
      v-model="off"
      :label="off ? 'On' : 'Off'"
    />
    <ASwitch
      v-model="onDisable"
      label="On Disable"
      disabled
    />
    <ASwitch
      v-model="offDisable"
      label="Off Disable"
      disabled
    />
  </div>
</template>

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

const md = ref(true)
const full = ref(true)
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <ASwitch
      v-model="md"
      class="rounded-0"
    />
    <ASwitch
      v-model="full"
      class="rounded-full"
    />
  </div>
</template>