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|numberundefined
dashed是否为虚线booleanfalse
layout分割线方向'horizontal'|'vertical''horizontal'
class附加类名string''
style内联样式,优先级高于组件默认 marginstringundefined

Slots

名称说明
children水平分割线嵌入的文字/图标内容(vertical 忽略)

设计变量

变量默认值用法
--cd-color-divider-border-color var(--cd-color-border)分割线颜色
--cd-color-divider-text-default var(--cd-color-text-0)标题颜色