仅 CSS Tailwind CSS 分隔线 — 水平和垂直，带有可选的居中标签。颜色和尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
分隔线组件在内容部分之间创建视觉分隔。分隔符轻量级且语义化，有助于分层构建信息并提高可读性。 Frutjam 分隔系统支持水平和垂直方向，并带有可选文本内容，用于在部分之间进行标记分隔。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| divider | 根据 | 带有可选居中标签文本的水平线 |
| divider-horizontal | 修饰符 | Horizontal orientation (default) |
| divider-vertical | 修饰符 | Vertical orientation |
| divider-start | 修饰符 | Aligns label text to the start |
| divider-end | 修饰符 | Aligns label text to the end |
| divider-solid | 风格 | Solid line style |
| divider-dashed | 风格 | 虚线样式 |
| divider-dotted | 风格 | Dotted line style |
| divider-primary | 颜色 | 主要主题颜色 |
| divider-secondary | 颜色 | 次要主题色 |
| divider-accent | 颜色 | 强调主题颜色 |
| divider-neutral | 颜色 | 中性主题色 |
| divider-info | 颜色 | 信息语义颜色 |
| divider-success | 颜色 | 成功语义色 |
| divider-warning | 颜色 | 警告语义颜色 |
| divider-error | 颜色 | 错误语义颜色 |
基本用法
<div class="divider"></div> |
<div className="divider"></div> |
Divider Directions
Horizontal Divider
html
<div class="divider divider-horizontal"></div> |
Vertical Divider
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> |
Divider with Text
Horizontal with Text
OR
html
<div class="divider divider-horizontal">OR</div> |
Vertical with Text
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> |
Divider Colors
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> |
Divider Content Positions
You can align the text within a divider to the start, center (default), or end of the line.
Horizontal Positions
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> |
Vertical Positions
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> |
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 分频器 类名称和结构。不再有幻觉课程。