两个 UI 框架中默认的 Divider 按钮渲染后都是 <div>元素。<div> HTML 元素是流式内容的通用容器。框架中对它的定义为：区隔内容的分割线。
属性
| Antd | Element | 说明 |
|---|---|---|
| — | border-style | 设置分割符样式 |
| children | — | 嵌套的标题 |
| className | — | 分割线样式类 |
| dashed | — | 是否虚线 |
| variant | — | 分割线是虚线、点线还是实线 |
| orientation | content-position | 分割线标题的位置 |
| orientationMargin | — | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 不能为 center。如果传入 string 类型的数字且不带单位，默认单位是 px |
| plain | — | 文字是否显示为普通正文样式 |
| style | — | 分割线样式对象 |
| size | — | 间距大小，仅对水平布局有效 |
| type | direction | 水平还是垂直类型 |
Ant Design
框架自5.0以后新增了variant、orientation、size属性，这些新增的属性应该也是在伴随着阿里内部业务的迭代而衍生的。
Element Plus
框架这个组件的属性比较简单，初步实现了分隔线的基础功能，在后续的升级过程中也并没有新增属性，应该是饿了么内部也没有更多的新业务了。
小结
分割线这种细粒度的组件都在两个框架中抽像出来，感觉分隔线上附带的文字才是核心特性，毕竟要实现这样一个布局样式还是要有一定的代码量的。
参考链接：
发表回复