Divider
分隔线,用于在视觉上分割内容区块,纯展示。严格对齐 Semi Design。
如何引入
import { Divider } from '@chenzy-design/svelte';基本用法
水平分割线块级占满宽度,用 margin 控制主轴外边距;dashed 切换实线/虚线。
Semi Design 是一个设计系统。 它定义了一套中后台设计与前端基础组件。 虚线用于表达临时或可选的分隔语义。
垂直分割线
layout="vertical" 时为行内元素,占满父级行高,常用于操作链接之间的竖向分隔。
编辑 复制 删除 更多
带文字
水平分割线可嵌入文字,align 控制内容居左/居中/居右;左对齐左线段短、右对齐右线段短、居中两侧等宽。
居左标题
居中标题
居右标题
带图标
水平分割线内容也可以是图标,用 margin 控制两侧留白。
分割线内容也可以是图标。
常用于区块之间放置装饰性标记。
API 参考
Divider
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 水平带内容时内容的对齐位置 | 'left'|'center'|'right' | 'center' |
margin | 主轴外边距,number→px;vertical 作用于左右,horizontal 作用于上下 | string|number | undefined |
dashed | 是否为虚线 | boolean | false |
layout | 分割线方向 | 'horizontal'|'vertical' | 'horizontal' |
class | 附加类名 | string | '' |
style | 内联样式,优先级高于组件默认 margin | string | undefined |
Slots
| 名称 | 说明 |
|---|---|
children | 水平分割线嵌入的文字/图标内容(vertical 忽略) |
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-divider-border-color | var(--cd-color-border) | 分割线颜色 |
--cd-color-divider-text-default | var(--cd-color-text-0) | 标题颜色 |