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>

Props

이름	타입	필수 여부	기본값	설명
items	Array<MenuItem>	Yes	-	메뉴 항목 배열
menuType	'checkbox' | 'switch'	No	'checkbox'	메뉴 타입(선택 방식)

v-model

이름	타입	기본값	설명
(기본)	Array<string | number | boolean>	[]	선택된 값 목록 바인딩

이벤트

이름	파라미터	설명
select:index	index: number	항목 클릭 시 해당 인덱스 전달

Item 타입 정의

type MenuItemValue = string | number | boolean;

type MenuItem = {
    value: MenuItemValue;
    label: string;
    leadingIcon?: IconTypes;
    leadingBadge?: BadgeProps;
    trailingBadge?: BadgeProps;
    trailingLabel?: string;
    type?: 'text' | 'error-text';
    disabled?: boolean;
    tooltip?: TooltipProps;
};

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>