Vitral 0.2
Formulário

SelectButton

Um controle segmentado para uma escolha, como radio group, ou várias, como toggle buttons.

Testado com WAI-ARIA

Importação

main.ts
import { SelectButton } from '@vitral/vue';

Único

value: Week
<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const view = ref('Week');</script> <template>    <div style="display: grid; gap: 0.5rem; justify-items: start">        <SelectButton v-model="view" :options="['Day', 'Week', 'Month']" label="Calendar view" :allow-empty="false" />        <small style="color: var(--vt-text-muted-color)">value: {{ view }}</small>    </div></template>

Ícones

value: left
<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const align = ref('left');const alignments = [    { label: 'Left', value: 'left', icon: 'menu' },    { label: 'Center', value: 'center', icon: 'sliders' },    { label: 'Right', value: 'right', icon: 'sidebar' }];</script> <template>    <div style="display: grid; gap: 0.5rem; justify-items: start">        <SelectButton v-model="align" :options="alignments" option-label="label" option-value="value" option-icon="icon" label="Alignment" />        <small style="color: var(--vt-text-muted-color)">value: {{ align }}</small>    </div></template>

Múltiplo

value: ["bold"]
<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const formats = ref<string[]>(['bold']);const formatOptions = [    { label: 'Bold', value: 'bold' },    { label: 'Italic', value: 'italic' },    { label: 'Underline', value: 'underline' }];</script> <template>    <div style="display: grid; gap: 0.5rem; justify-items: start">        <SelectButton v-model="formats" :options="formatOptions" option-label="label" option-value="value" multiple label="Text format" />        <small style="color: var(--vt-text-muted-color)">value: {{ JSON.stringify(formats) }}</small>    </div></template>

Tamanhos e estados

<script setup lang="ts">import { SelectButton } from '@vitral/vue';import { ref } from 'vue'; const plan = ref('pro');const plans = [    { name: 'Free', code: 'free' },    { name: 'Pro', code: 'pro' },    { name: 'Enterprise', code: 'ent', off: true }];</script> <template>    <SelectButton v-model="plan" :options="plans" option-label="name" option-value="code" option-disabled="off" size="small" label="Plan (small)" />    <SelectButton v-model="plan" :options="plans" option-label="name" option-value="code" option-disabled="off" size="large" label="Plan (large)" />    <SelectButton :model-value="'pro'" :options="plans" option-label="name" option-value="code" disabled label="Plan (disabled)" /></template>

API

Lido de packages/vue/src/components/SelectButton/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
optionsany[]—
optionLabelstringCampo (caminho com pontos) com o texto de uma opção. Sem ele, as opções são mostradas como estão.
optionValuestringCampo com o valor que o v-model recebe. Sem ele, a opção inteira é o valor.
optionDisabledstring—
optionIconstringCampo com o ícone de uma opção.
multiplebooleanVárias opções ao mesmo tempo; o v-model passa a ser um array.
allowEmptybooleanPermite pressionar de novo a opção pressionada para limpá-la. O padrão é true.
dataKeystringCompara valores de objeto por este campo em vez de pela estrutura.
sizeSize—
disabledboolean—
invalidboolean—
fluidboolean—
labelstringDá nome ao grupo; sem ele, nomeie-o com `aria-label` ou `aria-labelledby`.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: SelectButtonChangeEvent—

Slots

NomeProps do slotDescrição
option(props: { option: unknown; index: number; checked: boolean })—
icon(props: { option: unknown; icon?: IconProp })—

Usado nestes templates