Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Pembagi

Terakhir diperbarui:

Pembagi CSS Tailwind khusus CSS — horizontal dan vertikal dengan label opsional di tengah. Varian warna dan ukuran. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen pemisah menciptakan pemisahan visual antar bagian konten. Ringan dan semantik, pembagi membantu menyusun informasi secara hierarkis dan meningkatkan keterbacaan. Sistem pembagi Frutjam mendukung orientasi horizontal dan vertikal dengan konten teks opsional untuk pemisahan berlabel antar bagian.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
dividerBasisAturan horizontal dengan teks label terpusat opsional
divider-horizontalPengubahOrientasi horizontal (default)
divider-verticalPengubahOrientasi vertikal
divider-startPengubahMeratakan teks label ke awal
divider-endPengubahMeratakan teks label sampai akhir
divider-solidGayaGaya garis padat
divider-dashedGayaGaya garis putus-putus
divider-dottedGayaGaya garis putus-putus
divider-primaryWarnaWarna tema utama
divider-secondaryWarnaWarna tema sekunder
divider-accentWarnaWarna tema aksen
divider-neutralWarnaWarna tema netral
divider-infoWarnaInfo warna semantik
divider-successWarnaWarna semantik sukses
divider-warningWarnaWarna semantik peringatan
divider-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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

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

Arah Pembagi

Pembagi Horisontal

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

Pembagi Vertikal

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>

Pembagi dengan Teks

Horisontal dengan Teks

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

Vertikal dengan Teks

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>

Warna Pembagi

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>

Posisi Isi Pembagi

Anda dapat meratakan teks di dalam pembatas ke awal, tengah (default), atau akhir baris.

Posisi Horisontal

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>

Posisi Vertikal

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Pembagi yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP