Bileşenler

Collapsible

Tek bir içerik bölümünü gösterip gizleyen açılır alan.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Collapsible } from '@bigbang/ui';
Kaynak: Collapsible.tsx
Storybook: Collapsible · Playground

Collapsible üç parçadan oluşur ve hepsi @bigbang/ui paketindedir: Collapsible, CollapsibleTrigger, CollapsiblePanel.

import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@bigbang/ui';

<Collapsible>
  <CollapsibleTrigger>Ayrıntıları göster</CollapsibleTrigger>
  <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
</Collapsible>;

Özellikler

Collapsible

open

Açıklama: Kontrollü kullanımda panelin açık olup olmadığı. onOpenChange ile birlikte verin.
Tür: boolean

defaultOpen

Açıklama: Kontrolsüz kullanımda panelin ilk çizimde açık olup olmadığı.
Tür: boolean
Varsayılan: false

onOpenChange

Açıklama: Kullanıcı paneli açınca ya da kapatınca yeni durumla çağrılır.
Tür: (open: boolean) => void

disabled

Açıklama: Tetikleyiciyi devre dışı bırakır.
Tür: boolean
Varsayılan: false

className

Açıklama: Yalnızca yerleşim için: dış boşluk ve konum.
Tür: string

childrenZorunlu

Açıklama: Bu sırayla bir CollapsibleTrigger ve bir CollapsiblePanel.
Tür: ReactNode

CollapsibleTrigger

childrenZorunlu

Açıklama: Neyin açılacağını söyleyen görünür etiket, örneğin "Ayrıntıları göster".
Tür: ReactNode

chevron

Açıklama: Etiketten sonra, panel açılınca yarım tur dönen bir ok gösterir.
Tür: boolean
Varsayılan: true

className

Açıklama: Yalnızca yerleşim için.
Tür: string

CollapsiblePanel

hiddenUntilFound

Açıklama: Kapalı içeriği tarayıcının sayfada bul özelliğiyle bulunabilir tutar (hidden="until-found"); bir eşleşme paneli açar.
Tür: boolean
Varsayılan: true

keepMounted

Açıklama: Kapalı paneli DOM'da tutar, böylece durumu korunur. hiddenUntilFound açıkken yok sayılır.
Tür: boolean
Varsayılan: false

className

Açıklama: Yalnızca yerleşim için.
Tür: string

childrenZorunlu

Açıklama: Açıkken gösterilen içerik.
Tür: ReactNode

Veri öznitelikleri

data-component: collapsible, collapsible-trigger, collapsible-panel.
data-open kökte, tetikleyicide ve panelde açıkken bulunur (Base UI).
data-disabled devre dışı iken kökte ve tetikleyicide bulunur (Base UI).