Bileşenler

Accordion

Her biri bir içerik bölümünü açıp kapatan başlıklar yığını.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Bir başlığa tıklayarak içeriğin belirişine ve okun dönüşüne bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Accordion, line görünümde, 40 px başlık yüksekliğinde, yalnız öğeler arasında çizgiyle ve yatay iç boşluk olmadan gelir. Varsayılan olarak aynı anda tek öğe açık kalır; yenisini açmak açık olanı kapatır.

Bölüm içeriği burada yer alır.

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

export default function Default() {
  return (
    <Accordion defaultValue={["first"]}>
      <AccordionItem value="first" title="Birinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="second" title="İkinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="third" title="Üçüncü başlık">Bölüm içeriği burada yer alır.</AccordionItem>
    </Accordion>
  );
}

Kapsayıcılı görünüm

variant="contained" her öğeyi kenarlıklı bir kutuya koyar. description başlığın altına kısa bir ikinci satır, icon başlıktan önce süs ikonu ekler.

Bölüm içeriği burada yer alır.

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

export default function Contained() {
  return (
    <Accordion variant="contained" defaultValue={["first"]}>
      <AccordionItem value="first" title="Birinci başlık" description="Kısa açıklama metni" icon="info">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="second" title="İkinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="third" title="Üçüncü başlık">Bölüm içeriği burada yer alır.</AccordionItem>
    </Accordion>
  );
}

Birden çok açık öğe

multiple birden çok öğenin açık kalmasına izin verir. defaultValue ilk çizimde açık olan öğeleri belirler.

Bölüm içeriği burada yer alır.

Bölüm içeriği burada yer alır.

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

export default function Multiple() {
  return (
    <Accordion multiple defaultValue={["first", "second"]}>
      <AccordionItem value="first" title="Birinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="second" title="İkinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="third" title="Üçüncü başlık">Bölüm içeriği burada yer alır.</AccordionItem>
    </Accordion>
  );
}

Devre dışı

disabled bir öğeyi açılıp kapanamaz yapar. Tüm öğeleri birden kapatmak için Accordion üzerine verin.

Bölüm içeriği burada yer alır.

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

export default function Disabled() {
  return (
    <Accordion defaultValue={["first"]}>
      <AccordionItem value="first" title="Birinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="second" title="İkinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="third" title="Üçüncü başlık" disabled>Bölüm içeriği burada yer alır.</AccordionItem>
    </Accordion>
  );
}

Açık ve koyu mod

Renkler color-line-*, color-fg-* ve color-surface-* token’larından gelir; iki modda ayrı ayar gerekmez.

Bölüm içeriği burada yer alır.

Bölüm içeriği burada yer alır.

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

export default function Contained() {
  return (
    <Accordion variant="contained" defaultValue={["first"]}>
      <AccordionItem value="first" title="Birinci başlık" description="Kısa açıklama metni" icon="info">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="second" title="İkinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="third" title="Üçüncü başlık">Bölüm içeriği burada yer alır.</AccordionItem>
    </Accordion>
  );
}