Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Divider Component

CSS-only Tailwind CSS divider — horizontal and vertical with optional centered label. Color and size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Bölücü bileşenler içerik bölümleri arasında görsel ayrım oluşturur. Hafif ve anlamsal olan bölücüler, bilgilerin hiyerarşik olarak yapılandırılmasına ve okunabilirliğin geliştirilmesine yardımcı olur. Frutjam bölme sistemi, bölümler arasındaki etiketli ayrımlar için isteğe bağlı metin içeriğiyle yatay ve dikey yönlendirmeleri destekler.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
dividerTemelİsteğe bağlı ortalanmış etiket metniyle yatay cetvel
divider-horizontalDeğiştiriciYatay yönlendirme (varsayılan)
divider-verticalDeğiştiriciDikey yönlendirme
divider-startDeğiştiriciEtiket metnini başlangıca hizalar
divider-endDeğiştiriciEtiket metnini sona hizalar
divider-solidStilDüz çizgi stili
divider-dashedStilKesikli çizgi stili
divider-dottedStilNoktalı çizgi stili
divider-primaryRenkBirincil tema rengi
divider-secondaryRenkİkincil tema rengi
divider-accentRenkVurgu teması rengi
divider-neutralRenkNötr tema rengi
divider-infoRenkBilgi anlamsal rengi
divider-successRenkBaşarı anlamsal rengi
divider-warningRenkUyarı anlamsal rengi
divider-errorRenkHata anlamsal rengi

Temel Kullanım

<div class="divider"></div>

<div className="divider"></div>

Bölücü Yönleri

Yatay Bölücü

html 
<div class="divider divider-horizontal"></div>

Dikey Bölücü

content 1
content 2
html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Metinli Bölücü

Metinli Yatay

OR
html 
<div class="divider divider-horizontal">OR</div>

Metinli Dikey

content 1
OR
content 2
html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Bölücü Renkler

Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

Bölücü İçerik Konumları

Bölücü içindeki metni satırın başına, ortasına (varsayılan) veya sonuna hizalayabilirsiniz.

Yatay Konumlar

Start
Default
End
html 
1
2
3
4
5
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

Dikey Pozisyonlar

Start
Default
End
html 
1
2
3
4
5
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>