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

order	title
5	zh-CN en-US 位置 Placement

zh-CN

通知从右上角、右下角、左下角、左上角弹出。

en-US

A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.

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,
);