Separator

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Separator.tsx

Storybook

Separator · Playground

Separator, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

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

<Separator />;
<Separator label="veya" />;
<Separator orientation="vertical" />;

Özellikler

orientation

Açıklama

Çizginin yönü. Dikey Separator bulunduğu satırın yüksekliğine uzar.

Tür

'horizontal' | 'vertical'

Varsayılan

'horizontal'

label

Açıklama

Yatay çizginin ortasındaki kısa metin, ör. "veya". Ekran okuyucu için ayırıcıya ad olur.

Tür

string

decorative

Açıklama

Çizgi yalnızca görseldir: role="none" alır ve ekran okuyucu atlar. İçeriği başlıklar ya da listeler zaten grupluyorsa kullanın.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: dış boşluk. Rengi ya da kalınlığı değiştirmek için kullanmayın.

Tür

string

Separator, id ya da aria-* gibi başka öznitelik almaz. ref iletilmez.

Veri öznitelikleri

• data-component="separator": kök öğe üzerinde.
• data-part="label": label görünürken metni saran <span> üzerinde.

Dikey çizgi için kapsayıcı

Dikey Separator satırın yüksekliğine uzanır; bunun için kapsayıcı bir flex satırı olmalı ve yüksekliği bulunmalıdır.

<div className="flex h-6 items-center gap-md">
  <span>Birinci öğe</span>
  <Separator orientation="vertical" />
  <span>İkinci öğe</span>
</div>