代码演示
如何引入
import { Divider } from '@chenzy-design/svelte'; 基本用法
通过 layout 控制分割线方向(水平 / 垂直),dashed 切换实线 / 虚线,margin 控制分割线的外边距(水平方向为上下 margin,垂直方向为左右 margin)。
水平实线
Semi Design 是一个设计系统。 它定义了一套中后台设计与前端基础组件。水平虚线
Semi Design 是一个设计系统。 它定义了一套中后台设计与前端基础组件。垂直实线
左 中 右
垂直虚线
左 中 右
包含内容
水平分割线可以嵌入文字或图标,通过 align 控制内容的对齐方式(居左 / 居中 / 居右)。
这是居左文字
这是居中文字
这是居右文字
API 参考
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| align | 带内容时,内容对齐方式 | left | center | right | center |
| children | 内容 | Snippet | 无 |
| class | 类名 | string | 无 |
| dashed | 是否为虚线 | boolean | false |
| layout | 分割线方向 | horizontal | vertical | horizontal |
| margin | 分割线上下 margin(垂直方向时为左右 margin) | number | string | 无 |
| style | 自定义样式 | string | 无 |
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-color-divider-border-color | var(--cd-color-border) | 分割线颜色 |
| --cd-color-divider-text-default | var(--cd-color-text-0) | 标题颜色 |
显示第 1 条-第 2 条,共 2 条
- 1