分隔线 Divider
用来分隔不同内容区域的组件,能让你的页面各部分的边界更加清晰。
基础使用
分隔线分开不同内容区域。
隐藏源代码
分隔线方向
分隔线支持水平和垂直方向,通过 direction 属性设置。
A well-used door needs no oil on its hinges. A swift-flowing steam does no grow stagnant.
Neither sound nor thoughts can travel through a vacuum. Software rots if not used. These are great mysteries.
隐藏源代码
分隔线样式
分隔线支持多种基于 CSS border-style 实现的样式,通过 variant 属性设置。
隐藏源代码
分隔线颜色
分隔线支持通过 soft 开启浅色模式,通过 color 自定义颜色。
隐藏源代码
API
DividerProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| direction | 'horizontal' | 'vertical' | 是 | 'horizontal' | 分隔线方向。 | 0.0.0-beta |
| variant | 'solid' | 'dashed' | 'dotted' | 'double' | 'ridge' | 'groove' | 是 | 'solid' | 基于 CSS border-style 实现的分隔线样式。 | 0.0.0-beta |
| margin | number | string | 是 | | 分割线间距,水平时为上下间距,垂直时为左右间距。 | 0.0.0-beta |
| size | number | string | 是 | | 分隔线宽度。 | 0.0.0-beta |
| soft | boolean | 是 | false | 0.2.0 | |
| color | string | 是 | false | 0.2.0 |