ant-design/components/notification/demo/placement.md
二货机器人 64b905e9bd
chore: Update @ant-design/icons deps (#19979)
* update icons deps

* update all icon ref

* fix lint

* update snapshot
2019-11-28 12:34:33 +08:00

57 lines
1.3 KiB
Markdown
Executable File

---
order: 5
title:
zh-CN: 位置
en-US: Placement
---
## zh-CN
通知从右上角、右下角、左下角、左上角弹出。
## en-US
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
```jsx
import { Button, notification, Divider } from 'antd';
import {
RadiusUpleftOutlined,
RadiusUprightOutlined,
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
} from '@ant-design/icons';
const openNotification = placement => {
notification.info({
message: `Notification ${placement}`,
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>
</div>,
mountNode,
);
```