Multi Switch ​

<script setup lang="ts">
import { ref } from 'vue';
import { MultiSwitch } from '@youcan/ui-vue3';
import type { SwitchButtonOption } from '@youcan/ui-vue3/dist/types/components/MultiSwitch/types';

const OPTIONS: SwitchButtonOption[] = [
  {
    label: 'Mobile',
    value: 1,
    icon: 'i-youcan:device-mobile',
  },
  {
    label: 'Desktop',
    value: 2,
    icon: 'i-youcan:desktop',
  },
  {
    label: 'Tablet',
    value: 3,
    icon: 'i-youcan:credit-card',
  },
];

const activeOption = ref<SwitchButtonOption>(OPTIONS[0]);
</script>

<template>
  <div class="container">
    <MultiSwitch v-model:selected-option="activeOption" :options="OPTIONS" />
    <p>{{ activeOption.value }} : {{ activeOption.label }}</p>
  </div>
</template>