ant-design/components/notification/demo/placement.md

57 lines
1.3 KiB
Markdown
Raw Normal View History

---
order: 5
title:
zh-CN: 位置
en-US: Placement
---
## zh-CN
通知从右上角、右下角、左下角、左上角弹出。
## en-US
2019-04-19 22:36:29 +08:00
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
2019-05-07 14:57:32 +08:00
```jsx
2019-11-25 15:37:08 +08:00
import { Button, notification, Divider } from 'antd';
import {
RadiusUpleftOutlined,
RadiusUprightOutlined,
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
2019-11-25 15:37:08 +08:00
} from '@ant-design/icons';
const openNotification = placement => {
notification.info({
message: `Notification ${placement}`,
2019-05-07 14:57:32 +08:00
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
placement,
});
};
ReactDOM.render(
<div>
<Button type="primary" onClick={() => openNotification('topLeft')}>
<RadiusUpleftOutlined />
topLeft
</Button>
<Button type="primary" onClick={() => openNotification('topRight')}>
<RadiusUprightOutlined />
topRight
</Button>
<Divider />
<Button type="primary" onClick={() => openNotification('bottomLeft')}>
<RadiusBottomleftOutlined />
bottomLeft
</Button>
<Button type="primary" onClick={() => openNotification('bottomRight')}>
<RadiusBottomrightOutlined />
bottomRight
</Button>
2018-06-27 15:55:04 +08:00
</div>,
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
```