Ayırıcı

48 · Gelişmiş UI

İçerik bloklarını yatay bir çizgiyle ayırır. İçine metin konursa çizginin ortasında, başında ya da sonunda gösterilir.

acun:divider

Temel kullanım

İçerik verilmezse ince bir yatay çizgi (<hr>) çizilir. Üst ve alt boşluğu class ile verin, ör. my-4.

CANLI ÖRNEK

<p class="text-sm text-gray-600 dark:text-zinc-400">Müşteri bilgileri güncellendi.</p>
<acun:divider class="my-4" />
<p class="text-sm text-gray-600 dark:text-zinc-400">Sıradaki fatura: 14 Ekim 2026.</p>

Prop	Değerler
`class`	Boşluk sınıfları, ör. my-4

Metinli

Slot'a yazılan kısa metin çizginin ortasında, küçük punto ve büyük harflerle gösterilir. Giriş ekranlarındaki "veya" ayırıcısı için uygundur.

CANLI ÖRNEK

<acun:button class="w-full">E-posta ile giriş</acun:button>
<acun:divider>veya</acun:divider>
<acun:button variant="white" class="w-full">Telefon numarasıyla giriş</acun:button>

Metin hizası

align metnin yerini belirler; varsayılan center. Form bölümlerini başlıklandırırken start kullanın.

CANLI ÖRNEK

<acun:divider align="start">Kişisel bilgiler</acun:divider>
<acun:divider>Adres</acun:divider>
<acun:divider align="end">Son</acun:divider>

Prop	Değerler
`align`	start \| center \| end

Çizgi stili

variant çizginin stilini seçer; varsayılan düz (solid). Metinli ve metinsiz ayırıcıda aynı şekilde çalışır.

CANLI ÖRNEK

<acun:divider />
<acun:divider variant="dashed" />
<acun:divider variant="dotted">Arşiv</acun:divider>

Prop	Değerler
`variant`	solid \| dashed \| dotted

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`align`	`center`	start · center · end (metin varken)
`variant`	`solid`	solid · dashed · dotted

Slot'lar: varsayılan içerik (isteğe bağlı ayırıcı metni)