Separator

Ne zaman kullanılır

Separator, birbirinden bağımsız içerik gruplarını ayırmak içindir: menü bölümleri, araç çubuğu grupları, form bölümleri ve “veya” ile ayrılan seçenekler.

Ne zaman kullanılmaz

• Boşluk yeterliyse: Gruplar boşlukla zaten ayrışıyorsa çizgi eklemeyin; her çizgi ekrana ek bir görsel ağırlık getirir.
• Liste satırları arasında: Bir yığının her çocuğu arasına çizgi çekmek için Stack’in separator prop’unu kullanın.
• Bir kutu çerçevesi için: Kenarlıklar Box’ın border prop’u ile verilir; Separator çerçeve çizmez.

Anatomi

veya

AçıkKoyu

Kodu kopyala

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

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

1. Çizgi: 1 px kalınlıkta (border-width-default), color-border-subtle renginde. Etiketliyse metnin iki yanında birer parça olarak durur.
2. Etiket: İsteğe bağlı kısa metin (label); yalnızca yatay çizgide görünür.

Davranış

• Separator durağandır: üzerine gelince, tıklayınca ya da odaklanınca değişmez ve sekme sırasına girmez.
• Yatay çizgi kapsayıcının tüm genişliğini kaplar; dikey çizgi satırın yüksekliğine uzanır (self-stretch).
• Etiketli çizgide iki çizgi parçası flex-1 ile kalan genişliği eşit paylaşır; etiket ile parçalar arası boşluk space-md (8 px) olur.
• orientation="vertical" ile birlikte verilen label göz ardı edilir.
• className yalnızca kenar boşluğu gibi yerleşim içindir; renk ve kalınlık değiştirilmez.

Yönergeler

Gruplar arasına koyun

Çizgi, anlam grupları arasındadır. Her öğeyi çizgiyle ayırınca gruplar okunmaz olur.

Birinci öğeİkinci öğe

Üçüncü öğe

YapınÇizgi iki grubu ayırıyor.

Birinci öğe

İkinci öğe

Üçüncü öğe

YapmayınHer öğe çizgiyle ayrılınca gruplama kayboluyor.

Etiketi kısa tutun

Etiket çizginin ortasında tek satırda durur; uzun metin çizgiyi ezer.

veya

YapınTek kelimelik etiket.

Bu iki seçenekten yalnızca birini seçin

YapmayınUzun etiket çizgiyi daraltıyor.

İçerik

• Etiketi bir ya da iki kelimeyle yazın: “veya”, “ya da”.
• Cümle düzeninde, küçük harfle yazın; noktalama eklemeyin.
• Etiketi bir komut ya da başlık olarak kullanmayın; bölüm başlığı için Heading kullanın.

Türkçe	İngilizce
veya	or
ya da	or

İlgili bileşenler

• Stack: separator prop’u çocukları arasına çizgi çeker.
• Box: Kenarlık ve çerçeve için border prop’u.
• Heading: Gruba ad vermek için başlık.