---
title: "Divider"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Divider with horizontal and vertical orientation. Text labels, icons, and color variants for clean section separation in layouts and forms."
url: https://frutjam.com/zh-hant/components/divider
---

# Divider Component

分隔線組件在內容部分之間創建視覺分隔。分隔符號輕量級且語義化，有助於分層建構資訊並提高可讀性。 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      | 顏色  | 錯誤語意顏色         |

## 基本用法

## 分音器方向

### 水平分隔線

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

### 垂直分隔線

```html
<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>
```

## 帶有文字的分隔線

### 水平與文字

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

### 與文字垂直

```html
<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>
```

## 分隔線顏色

```html
<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>
```

## 分隔線內容位置

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

### 水平位置

```html
<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>
```

### 垂直位置

```html
<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>
```