Collapsible — Selaras

Penggunaan

Tertutup secara default - slot trigger adalah konten tombol sendiri, slot default adalah panel:

vue-html

<SCollapsible>
  <template #trigger>
    What's included in the free plan?
  </template>
  Everything you need to get started: unlimited projects, community
  support, and access to every core feature.
</SCollapsible>

Terkontrol

v-model:open mengontrolnya dari parent daripada mengelola state sendiri:

vue-html

<SCollapsible v-model:open="open">
  <template #trigger>
    Toggle me
  </template>
  Content controlled by the parent.
</SCollapsible>

Disabled

disabled memblokir trigger agar tidak dapat toggle sama sekali:

Locked open.

vue-html

<SCollapsible disabled default-open>
  <template #trigger>
    This can't be collapsed
  </template>
  Locked open.
</SCollapsible>

Arah

direction="up" mengungkap konten di atas trigger alih-alih di bawahnya - rotasi chevron saat rest/open dibalik untuk mencocokkan, tetap menunjuk ke mana konten akan muncul:

vue-html

<SCollapsible direction="up">
  <template #trigger>
    What's included in the free plan?
  </template>
  Everything you need to get started: unlimited projects, community
  support, and access to every core feature.
</SCollapsible>

Custom `:ui`

Global dan scoped recipe overrides menggunakan ui.collapsible.

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

Theme source "collapsible" not found

Props

Prop	Tipe	Default
`color`	ColorRole	`primary`
`open`	`boolean`	-
`defaultOpen`	`boolean`	`false`
`disabled`	`boolean`	-
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`direction`	`'down' \| 'up'`	`'down'`
`ui`	`Partial<Record<CollapsibleSlot, string \| object>>`	-

Emits

Event	Payload
`update:open`	`boolean`

Slots

Slot	Props	Deskripsi
`trigger`	`{ open }`	Konten tombol trigger sendiri
`default`	`{ open }`	Konten panel collapsible
`chevron-icon`	`{ open }`	Menggantikan chevron default