跳至主要內容
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.

分隔線組件在內容部分之間創建視覺分隔。分隔符號輕量級且語義化，有助於分層建構資訊並提高可讀性。 Frutjam 分隔系統支援水平和垂直方向，並帶有可選文字內容，用於在部分之間進行標記分隔。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
divider根據帶有可選居中標籤文字的水平線
divider-horizontal修飾符水平方向（預設）
divider-vertical修飾符垂直方向
divider-start修飾符將標籤文字與開頭對齊
divider-end修飾符將標籤文字與末尾對齊
divider-solid風格實線樣式
divider-dashed風格虛線樣式
divider-dotted風格虛線樣式
divider-primary顏色主要主題顏色
divider-secondary顏色次要主題色
divider-accent顏色強調主題顏色
divider-neutral顏色中性主題色
divider-info顏色訊息語意顏色
divider-success顏色成功語意色
divider-warning顏色警告語意顏色
divider-error顏色錯誤語意顏色

基本用法

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

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

分音器方向

水平分隔線

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

垂直分隔線

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>

帶有文字的分隔線

水平與文字

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

與文字垂直

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>

分隔線顏色

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>

分隔線內容位置

您可以將分隔線內的文字與行的開頭、中心（預設）或結尾對齊。

水平位置

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>

垂直位置

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>