分割线是一个呈线状的轻量化组件，用于有逻辑的组织元素内容和页面结构或区域。
import { Divider } from '@kousum/semi-ui-vue';| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| align | 带内容时，内容对齐方式 | left | center | right | center | 2.9.0 |
| children | 内容 | ReactNode | 无 | 2.9.0 |
| className | 类名 | string | 无 | 2.9.0 |
| dashed | 是否为虚线 | boolean | false | 2.9.0 |
| layout | 分割线方向 | horizontal | vertical | horizontal | 2.9.0 |
| margin | 分割线上下 margin (垂直方向时为左右 margin) | number | string | 无 | 2.9.0 |
| style | 自定义样式 | CSSProperties | 无 | 2.9.0 |
| 变量 | 默认值 | 用法 |
|---|---|---|
| $spacing-divider_horizontal-marginLeft | 0px | 水平模式左间距 |
| $spacing-divider_horizontal-marginRight | 0px | 水平模式右间距 |
| $spacing-divider_horizontal-marginTop | 1px | 水平模式上间距 |
| $spacing-divider_horizontal-marginBottom | 1px | 水平模式下间距 |
| $spacing-divider_vertical-marginLeft | 1px | 垂直模式左间距 |
| $spacing-divider_vertical-marginRight | 1px | 垂直模式右间距 |
| $spacing-divider_vertical-marginTop | 0px | 垂直模式上间距 |
| $spacing-divider_vertical-marginBottom | 0px | 垂直模式下间距 |
| $spacing-divider_inner_text-paddingLeft | 8px | 内容为纯文字时内容左间距 |
| $spacing-divider_inner_text-paddingRight | 8px | 内容为纯文字时内容右间距 |
| 变量 | 默认值 | 用法 |
|---|---|---|
| $width-divider_inner_text_left_line | 40px | 左对齐文字时左间距宽度 |
| $width-divider_inner_text_right_line | 40px | 右对齐文字时右间距宽度 |
| $width-divider-border | 1px | 分割线宽度 |
| 变量 | 默认值 | 用法 |
|---|---|---|
| $height-divider_vertical | 20px | 垂直分割线高度 |
| 变量 | 默认值 | 用法 |
|---|---|---|
| $color-divider_border-color | var(--semi-color-border) | 分割线颜色 |
| $color-divider_text-default | var(--semi-color-text-0) | 标题颜色 |
| 变量 | 默认值 | 用法 |
|---|---|---|
| $font-divider_text-weight | $font-weight-bold | 分割线文字字重 |