Bileşenler

Separator

İçeriği gruplara ayıran ince bir çizgi; isteğe bağlı olarak ortasında kısa bir etiket taşır.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Separator, iki içerik grubu arasına 1 px kalınlığında color-border-subtle renginde yatay bir çizgi çeker. Genişliği kapsayıcısı kadardır.

Birinci öğe

İkinci öğe

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

export default function Default() {
  return (
    <div className="flex w-full max-w-80 flex-col gap-md">
      <span className="type-body-md text-fg-default">Birinci öğe</span>
      <Separator />
      <span className="type-body-md text-fg-default">İkinci öğe</span>
    </div>
  );
}

Dikey

orientation="vertical" çizgiyi dikey yapar. Çizgi, bulunduğu satırın yüksekliğine uzanır (self-stretch); kapsayıcı bir flex satırı olmalı ve yüksekliği olmalıdır.

Birinci öğe

İkinci öğe

Üçüncü öğe

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

export default function Vertical() {
  return (
    <div className="flex h-6 items-center gap-md">
      <span className="type-body-md text-fg-default">Birinci öğe</span>
      <Separator orientation="vertical" />
      <span className="type-body-md text-fg-default">İkinci öğe</span>
      <Separator orientation="vertical" />
      <span className="type-body-md text-fg-default">Üçüncü öğe</span>
    </div>
  );
}

Etiketli

label, yatay çizginin ortasına kısa bir metin koyar ve Separator’ı bu metinle adlandırır. Dikey Separator etiketi göstermez.

veya

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

export default function WithLabel() {
  return (
    <div className="w-full max-w-80">
      <Separator label="veya" />
    </div>
  );
}

Süs amaçlı

decorative, çizgiyi ekran okuyucudan gizler (role="none"). Başlık ya da liste gruplamayı zaten anlatıyorsa kullanın.

Birinci öğe

İkinci öğe

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

export default function Decorative() {
  return (
    <div className="flex w-full max-w-80 flex-col gap-md">
      <span className="type-body-md text-fg-default">Birinci öğe</span>
      <Separator decorative />
      <span className="type-body-md text-fg-default">İkinci öğe</span>
    </div>
  );
}

Gruplar arasında

Çizgi her öğenin arasına değil, anlam grupları arasına konur. Örnekte ilk iki öğe bir grup, üçüncü öğe ayrı bir gruptur.

Birinci öğeİkinci öğe

Üçüncü öğe

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

export default function InGroups() {
  return (
    <div className="flex w-full max-w-64 flex-col gap-sm rounded-md border border-line-subtle p-md">
      <span className="type-body-md text-fg-default">Birinci öğe</span>
      <span className="type-body-md text-fg-default">İkinci öğe</span>
      <Separator />
      <span className="type-body-md text-fg-default">Üçüncü öğe</span>
    </div>
  );
}

Açık ve koyu mod

Çizgi color-border-subtle, etiket color-text-subtle token’ından renk alır; açık ve koyu modda ve marka değişiminde ayrı ayar gerekmez.

veya

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

export default function WithLabel() {
  return (
    <div className="w-full max-w-80">
      <Separator label="veya" />
    </div>
  );
}