Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần chia

Cập nhật lần cuối:

Bộ chia CSS Tailwind chỉ dành cho CSS — ngang và dọc với nhãn ở giữa tùy chọn. Các biến thể màu sắc và kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Divider components create visual separation between content sections. Lightweight and semantic, dividers help structure information hierarchically and improve readability. The Frutjam divider system supports horizontal and vertical orientations with optional text content for labeled separations between sections.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
dividerCăn cứHorizontal rule with optional centered label text
divider-horizontalCông cụ sửa đổiHorizontal orientation (default)
divider-verticalCông cụ sửa đổiVertical orientation
divider-startCông cụ sửa đổiAligns label text to the start
divider-endCông cụ sửa đổiAligns label text to the end
divider-solidPhong cáchSolid line style
divider-dashedPhong cáchDashed line style
divider-dottedPhong cáchDotted line style
divider-primaryMàu sắcMàu chủ đề chính
divider-secondaryMàu sắcMàu chủ đề phụ
divider-accentMàu sắcMàu chủ đề nhấn mạnh
divider-neutralMàu sắcMàu chủ đề trung tính
divider-infoMàu sắcMàu sắc ngữ nghĩa thông tin
divider-successMàu sắcMàu ngữ nghĩa thành công
divider-warningMàu sắcMàu ngữ nghĩa cảnh báo
divider-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

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

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

Divider Directions

Horizontal Divider

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

Vertical Divider

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>

Divider with Text

Horizontal with Text

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

Vertical with Text

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>

Divider Colors

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>

Divider Content Positions

You can align the text within a divider to the start, center (default), or end of the line.

Horizontal Positions

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>

Vertical Positions

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 cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Dải phân cách chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP