Bileşenler

Collapsible

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

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Açılırken içeriğin 4 px aşağı süzülerek belirmesine ve okun dönmesine bakın.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Collapsible kapalı gelir. Tetikleyiciye tıklamak ya da Enter, Space tuşlarına basmak paneli açar ve kapatır.

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

export default function Default() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Ayrıntıları göster</CollapsibleTrigger>
      <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
    </Collapsible>
  );
}

Açık başlangıç

defaultOpen paneli ilk çizimde açık getirir. Kullanıcı yine kapatabilir.

Ek ayrıntılar burada yer alır.

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

export default function Open() {
  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger>Ayrıntıları göster</CollapsibleTrigger>
      <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
    </Collapsible>
  );
}

Ok olmadan

chevron={false} oku kaldırır. Tetikleyici yalnızca metin olarak görünür; açık durumu aria-expanded ile yine bildirilir.

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

export default function WithoutChevron() {
  return (
    <Collapsible>
      <CollapsibleTrigger chevron={false}>Ayrıntıları göster</CollapsibleTrigger>
      <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
    </Collapsible>
  );
}

Devre dışı

disabled tetikleyiciyi etkisizleştirir ve soluk gösterir.

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

export default function Disabled() {
  return (
    <Collapsible disabled>
      <CollapsibleTrigger>Ayrıntıları göster</CollapsibleTrigger>
      <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
    </Collapsible>
  );
}

Açık ve koyu mod

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

Ek ayrıntılar burada yer alır.

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

export default function Open() {
  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger>Ayrıntıları göster</CollapsibleTrigger>
      <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
    </Collapsible>
  );
}