Skip to content

分隔线 Divider

用来分隔不同内容区域的组件,能让你的页面各部分的边界更加清晰。

基础使用

分隔线分开不同内容区域。

Thus spake the master programmer:
"Let the programmer be many and the managers few -- then all will be productive."
隐藏源代码

分隔线方向

分隔线支持水平和垂直方向,通过 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 属性设置。

When designing an accounting package, the programmer operates as a mediator between people having different ideas:
how it must operate,
how its reports must appear,
and how it must conform to the tax laws.
By contrast, an operating system is not limited my outside appearances.
When designing an operating system, the programmer seeks the simplest harmony between machine and ideas.
This is why an operating system is easier to design.
隐藏源代码

分隔线颜色

分隔线支持通过 soft 开启浅色模式,通过 color 自定义颜色。

Content 1
Content 2
Content 3
隐藏源代码

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
marginnumber | string分割线间距,水平时为上下间距,垂直时为左右间距。0.0.0-beta
sizenumber | string分隔线宽度。0.0.0-beta
softbooleanfalse0.2.0
colorstringfalse0.2.0