SelectButton

Basic

<script setup lang="ts">
import { SelectButton } from '@jennifersoft/vue-components-v2';
const items = [
    { label: 'blue', value: 'blue' },
    { label: 'purple', value: 'purple' },
];
</script>
<template>
    <select-button :items="items" />
</template>

Size

<script setup lang="ts">
import { ref } from 'vue';
import { SelectButton } from '@jennifersoft/vue-components-v2';
const items = [
    { label: 'blue', value: 'blue' },
    { label: 'purple', value: 'purple' },
];
const small = ref('blue');
const medium = ref('blue');
const large = ref('blue');
</script>
<template>
    <select-button v-model="small" :items="items" size="small" />
    <select-button v-model="medium" :items="items" size="medium" />
    <select-button v-model="large" :items="items" size="large" />
</template>

disabled

<script setup lang="ts">
import { ref } from 'vue';
import { SelectButton } from '@jennifersoft/vue-components-v2';
const items = [
    { label: 'blue', value: 'blue' },
    { label: 'purple', value: 'purple' },
];
const select = ref('blue');
</script>
<template>
    <select-button v-model="select" :items="items" :disabled="true" />
</template>

Icon + Tooltip

<script setup lang="ts">
import { ref } from 'vue';
import { SelectButton, ICON_TYPE } from '@jennifersoft/vue-components-v2';
const iconItems = [
    {
        icon: ICON_TYPE.alignLeft,
        value: 'left',
        tooltip: { text: '왼쪽으로 정렬', placement: 'top' },
    },
    {
        icon: ICON_TYPE.alignCenter,
        value: 'center',
        tooltip: { text: '가운데로 정렬', placement: 'top' },
    },
    {
        icon: ICON_TYPE.alignRight,
        value: 'right',
        tooltip: { text: '오른쪽으로 정렬', placement: 'top' },
    },
];

const align = ref('left');
</script>
<template>
    <select-button v-model="align" :items="iconItems" />
</template>