Toggle Group

Penggunaan

Digabung menjadi satu segmented control, teknik visual yang sama seperti ButtonGroup. type="single" (default) berperilaku seperti radio group tersegmented - memilih satu item membatalkan pilihan yang lain:

<SToggleGroup :items="['List', 'Grid', 'Kanban']" default-value="List" />

Multiple selection

type="multiple" memungkinkan sejumlah item tetap ditekan secara bersamaan - modelValue/defaultValue menjadi array daripada nilai tunggal:

<SToggleGroup type="multiple" :items="items" :default-value="['bold']" />

Ikon saja

Slot item menggantikan konten ikon+label default item sepenuhnya - pasangkan dengan label visually-hidden sehingga item tetap memiliki nama yang dapat diakses:

<SToggleGroup :items="items" default-value="list">
  <template #item="{ item }">
    <SIcon :name="item.icon" class="size-4.5" />
    <span class="sr-only">{{ item.label }}</span>
  </template>
</SToggleGroup>

Orientasi

<SToggleGroup orientation="vertical" :items="['List', 'Grid', 'Kanban']" />

Disabled

disabled pada grup memblokir setiap item; disabled pada satu item memblokir hanya item itu:

<SToggleGroup :items="[
  { label: 'List', value: 'list' },
  { label: 'Grid', value: 'grid', disabled: true },
]" />

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema ToggleGroup sendiri:

Props

ToggleGroupItem adalah { label: string, value: string, icon?: string, disabled?: boolean }.

Emits

Slots