-
-
-
-
-
-
-
-
-
-
-
Components
-
General
-
Layout
-
Navigation
-
Data Entry
-
Data Display
-
Feedback
-
Other
-
-
-
-
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 |