Vitral 0.2
Botão

SplitButton

Um comando com um menu de comandos relacionados soldado a ele.

Testado com WAI-ARIA

Importação

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

Básico

Last command: —
<script setup lang="ts">import { SplitButton, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const items: MenuItem[] = [    { label: 'Save as draft', icon: 'file', command: () => (last.value = 'Save as draft') },    { label: 'Save and close', icon: 'check', command: () => (last.value = 'Save and close') },    { separator: true },    { label: 'Export', icon: 'download', command: () => (last.value = 'Export') },    { label: 'Delete', icon: 'trash', disabled: true }];</script> <template>    <SplitButton label="Save" icon="check" :model="items" @click="last = 'Save'" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

Severidades e variantes

<script setup lang="ts">import { SplitButton, type MenuItem } from '@vitral/vue'; const items: MenuItem[] = [    { label: 'Save as draft', icon: 'file' },    { label: 'Save and close', icon: 'check' },    { separator: true },    { label: 'Export', icon: 'download' },    { label: 'Delete', icon: 'trash', disabled: true }];</script> <template>    <SplitButton label="Save" :model="items" severity="secondary" />    <SplitButton label="Save" :model="items" severity="success" rounded />    <SplitButton label="Save" :model="items" severity="danger" variant="outlined" />    <SplitButton label="Save" :model="items" variant="text" raised /></template>

Tamanhos e estados

<script setup lang="ts">import { SplitButton, type MenuItem } from '@vitral/vue'; const items: MenuItem[] = [    { label: 'Save as draft', icon: 'file' },    { label: 'Save and close', icon: 'check' },    { separator: true },    { label: 'Export', icon: 'download' },    { label: 'Delete', icon: 'trash', disabled: true }];</script> <template>    <SplitButton label="Small" :model="items" size="small" />    <SplitButton label="Large" :model="items" size="large" />    <SplitButton label="Saving" :model="items" loading />    <SplitButton label="Disabled" :model="items" disabled /></template>

API

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

Props

NomeTipoDescrição
labelstringO texto do comando principal.
iconIconProp—
modelMenuItem[]Os comandos do menu, como em `<Menu>`.
dropdownIconIconPropO ícone do botão do menu. O padrão é uma seta.
severitySeverity—
variant'filled' | 'outlined' | 'text'—
sizeSize—
roundedboolean—
raisedboolean—
fluidboolean—
disabledboolean—
loadingbooleanMostra um spinner no botão principal e o desabilita.
menuButtonLabelstringDá nome ao botão do menu. O padrão é o "More options" do locale.
placementOverlayPlacement—
appendTostringOnde o menu é renderizado: `'body'` (o padrão), `'self'`, ou um seletor.

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

Emits

EventoPayloadDescrição
clickevent: MouseEventO botão principal foi pressionado.
show——
hide——

Slots

NomeProps do slotDescrição
default—O conteúdo do botão principal.
icon——
dropdownicon——
item(props: { item: MenuItem; label: string | undefined; focused: boolean; disabled: boolean })Um item do menu, como o slot `item` de `<Menu>`.