src/ui/c-buttons-select/c-buttons-select.demo.vue


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script setup lang="ts">
const optionsA = [
  { label: 'Option A', value: 'a' },
  { label: 'Option B', value: 'b', tooltip: 'This is a tooltip' },
  { label: 'Option C', value: 'c' },
];

const optionB = {
  'Option A': 'a',
  'Option B': 'b',
  'Option C': 'c',
};

const valueA = ref('a');
</script>

<template>
  <c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " />
  <c-buttons-select v-model:value="valueA" :options="optionsA" label="Label: " label-position="left" mt-2 />
  <c-buttons-select v-model:value="valueA" :options="optionB" label="Options object: " />
</template>