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

Bölücü Bileşen

Son güncelleme:

Yalnızca CSS'ye özgü Tailwind CSS bölücü — isteğe bağlı ortalanmış etiketle yatay ve dikey. Renk ve beden çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

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ü

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

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

Metinli Dikey

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

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

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

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>

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Bölücü sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin