Przejdź do głównej treści
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.

Komponenty rozdzielające tworzą wizualną separację pomiędzy sekcjami treści. Lekkie i semantyczne dzielniki pomagają hierarchizować informacje i poprawiają czytelność. System przekładek Frutjam obsługuje orientację poziomą i pionową z opcjonalną zawartością tekstową dla oznaczonych separacji pomiędzy sekcjami.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
dividerOpieraćLinia pozioma z opcjonalnym wyśrodkowanym tekstem etykiety
divider-horizontalModyfikatorOrientacja pozioma (domyślna)
divider-verticalModyfikatorOrientacja pionowa
divider-startModyfikatorWyrównuje tekst etykiety do początku
divider-endModyfikatorWyrównuje tekst etykiety do końca
divider-solidStylStyl linii ciągłej
divider-dashedStylStyl linii przerywanej
divider-dottedStylStyl linii przerywanej
divider-primaryKolorPodstawowy kolor motywu
divider-secondaryKolorKolor motywu drugorzędnego
divider-accentKolorKolor motywu akcentującego
divider-neutralKolorNeutralny kolor motywu
divider-infoKolorKolor semantyczny informacji
divider-successKolorSukces semantyczny kolor
divider-warningKolorOstrzeżenie kolor semantyczny
divider-errorKolorBłąd koloru semantycznego

Podstawowe użycie

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

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

Kierunki rozdzielacza

Rozdzielacz poziomy

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

Rozdzielacz pionowy

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>

Dzielnik z tekstem

Poziomo z tekstem

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

Pionowo z tekstem

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>

Kolory rozdzielacza

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>

Pozycje treści rozdzielacza

Tekst w obrębie separatora można wyrównać do początku, środka (domyślnie) lub końca linii.

Pozycje poziome

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>

Pozycje pionowe

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>