ant-design/components/divider/demo/with-text.md

44 lines
1.2 KiB
Markdown
Raw Normal View History

2018-04-03 14:25:47 +08:00
---
order: 1
2018-04-03 14:25:47 +08:00
title:
zh-CN: 带文字的分割线
en-US: Divider with title
2018-04-03 14:25:47 +08:00
---
## zh-CN
分割线中带有文字,可以用 `orientation` 指定文字位置。
2018-04-03 14:25:47 +08:00
## en-US
Divider with inner title, set `orientation="left/right"` to align it.
2018-04-03 14:25:47 +08:00
2019-05-07 14:57:32 +08:00
```jsx
2018-04-03 14:25:47 +08:00
import { Divider } from 'antd';
ReactDOM.render(
<>
<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>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>
2018-04-03 14:25:47 +08:00
<Divider orientation="left">Left Text</Divider>
2019-05-07 14:57:32 +08:00
<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>
2018-04-03 14:25:47 +08:00
<Divider orientation="right">Right Text</Divider>
2019-05-07 14:57:32 +08:00
<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>
</>,
2019-05-07 14:57:32 +08:00
mountNode,
2018-11-28 15:00:03 +08:00
);
2019-05-07 14:57:32 +08:00
```