en-US

Set the pop-up position through dPlacement.

zh-CN

通过 dPlacement 设置弹出位置。

import { useImmer } from '@react-devui/hooks';
import { DNotification, DButton } from '@react-devui/ui';

let key = 0;
export default function Demo() {
  const [notifications, setNotifications] = useImmer([]);

  return (
    <>
      {['LT', 'RT', 'LB', 'RB'].map((placement) => (
        <DButton
          key={placement}
          onClick={() => {
            setNotifications((draft) => {
              key += 1;
              draft.push({
                key,
                visible: true,
                placement:
                  placement === 'LT' ? 'left-top' : placement === 'RT' ? 'right-top' : placement === 'LB' ? 'left-bottom' : 'right-bottom',
              });
            });
          }}
        >
          {placement}
        </DButton>
      ))}
      {notifications.map(({ key, visible, placement }) => (
        <DNotification
          key={key}
          dVisible={visible}
          dTitle="Notification Title"
          dDescription={`An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.`}
          dPlacement={placement}
          onClose={() => {
            setNotifications((draft) => {
              draft.find((n) => n.key === key).visible = false;
            });
          }}
        ></DNotification>
      ))}
    </>
  );
}