Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Element rozdzielający

Ostatnia aktualizacja:

Tylko CSS Dzielnik CSS Tailwind — poziomy i pionowy z opcjonalną wyśrodkowaną etykietą. Warianty kolorystyczne i rozmiarowe. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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

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

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

Pionowo z tekstem

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

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

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

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Rozdzielacz. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP