MultiMenu

Type (checkbox)

• One
• Two
• Three
• Four
• Five
• Six

<script setup lang="ts">
import { MultiMenuContainer, MenuBox } from "@jennifersoft/vue-components-v2";

const items1 = [
    { label: "One", value: 1 },
    { label: "Two", value: 2 },
    { label: "Three", value: 3 },
    { label: "Four", value: 4 },
    { label: "Five", value: 5 },
    { label: "Six", value: 6 },
];
const checkedList1 = ref([]);
</script>
<template>
  <menu-box class="w-48">
      <multi-menu-container menu-type="checkbox" v-model="checkedList1" :items="items1" @select:index="(index) => console.log(index)" />
  </menu-box>
</template>

Type (switch)

• One
• Two
• Three
• Four
• Five
• Six

<script setup lang="ts">
import { MenuContainer, MenuBox } from "@jennifersoft/vue-components-v2";
import { ref } from "vue";

const items2 = [
    { label: "One", value: 1 },
    { label: "Two", value: 2 },
    { label: "Three", value: 3 },
    { label: "Four", value: 4 },
    { label: "Five", value: 5 },
    { label: "Six", value: 6 },
];
const checkedList2 = ref([]);
</script>
<template>
  <menu-box class="w-48">
      <multi-menu-container menu-type="switch" v-model="checkedList2" :items="items2" />
  </menu-box>
</template>