Divider分割线
区隔内容的分割线。
何时使用
对不同章节的文本段落进行分割。
对行内文字/链接进行分割,例如表格的操作列。
代码演示
默认为水平分割线,可在中间加入文字。
import { Divider } from 'choerodon-ui';
ReactDOM.render(
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider>With Text</Divider>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider dashed />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider orientation="left">With Text</Divider>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
<Divider orientation="right">With Text</Divider>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
</div>,
mountNode);
使用 type="vertical"
设置为行内的垂直分割线。
import { Divider } from 'choerodon-ui';
ReactDOM.render(
<div>
Text
<Divider type="vertical" />
<a href="#">Link</a>
<Divider type="vertical" />
<a href="#">Link</a>
</div>,
mountNode);
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dashed | 是否虚线 | Boolean | false |
type | 水平还是垂直类型 | enum: horizontal vertical | horizontal |