Accordion

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Accordion } from '@bigbang/ui';

Kaynak

Accordion.tsx

Storybook

Accordion · Playground

Accordion iki parçadan oluşur ve ikisi de @bigbang/ui paketindedir: Accordion, AccordionItem.

import { Accordion, AccordionItem } from '@bigbang/ui';

<Accordion defaultValue={["first"]} multiple>
  <AccordionItem value="first" title="Birinci başlık" description="Kısa açıklama metni">
    …
  </AccordionItem>
  <AccordionItem value="second" title="İkinci başlık" icon="info">
    …
  </AccordionItem>
</Accordion>;

Özellikler

Accordion

value

Açıklama

Kontrollü kullanımda açık öğelerin değerleri. onValueChange ile birlikte verin.

Tür

string[]

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimde açık öğelerin değerleri.

Tür

string[]

Varsayılan

[]

onValueChange

Açıklama

Her değişiklikten sonra açık öğelerin değerleriyle çağrılır.

Tür

(value: string[]) => void

multiple

Açıklama

Birden çok öğenin açık kalmasına izin verir. Verilmezse bir öğeyi açmak diğerlerini kapatır.

Tür

boolean

Varsayılan

false

variant

Açıklama

line öğeleri çizgilerle ayırır, başlık metnini çevresindeki içerikle hizalı tutar ve sayfa içeriği içindir; contained her öğeyi kenarlıklı bir kutuya koyar.

Tür

'line' | 'contained'

Varsayılan

'line'

size

Açıklama

36 ya da 40 px başlık yüksekliği ve buna uyan metin boyutu.

Tür

'sm' | 'md'

Varsayılan

'sm'

headingLevel

Açıklama

Her öğe başlığının başlık düzeyi; sayfanın başlık sırası doğru kalır.

Tür

2 | 3 | 4 | 5 | 6

Varsayılan

3

hiddenUntilFound

Açıklama

Kapalı içeriği tarayıcının sayfada bul özelliğiyle bulunabilir tutar (hidden="until-found"); bir eşleşme öğesini açar.

Tür

boolean

Varsayılan

true

disabled

Açıklama

Tüm öğeleri 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

AccordionItem bileşenleri.

Tür

ReactNode

AccordionItem

valueZorunlu

Açıklama

Öğeyi value ve defaultValue içinde tanımlayan değer.

Tür

string

titleZorunlu

Açıklama

Başlık metni. Öğeyi açan butonun adıdır.

Tür

string

description

Açıklama

Başlığın altında kısa ikinci satır. Ekran okuyucu bunu butonun adının parçası olarak, başlıktan sonra okur.

Tür

string

icon

Açıklama

Başlıktan önce kayıtlı ikon adı. Süstür.

Tür

IconName

disabled

Açıklama

Yalnızca bu öğeyi devre dışı bırakır.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için.

Tür

string

childrenZorunlu

Açıklama

Öğe açıkken gösterilen içerik.

Tür

ReactNode

Veri öznitelikleri

• data-component: accordion, accordion-item, accordion-trigger, accordion-panel.
• data-variant kök öğede.
• data-open açık öğede ve panelde, data-disabled devre dışı öğede (Base UI).