en-US

Set the pop-up position through dPlacement.

zh-CN

通过 dPlacement 设置弹出位置。

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

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

  return (
    <>
      {['Top', 'Bottom'].map((placement) => (
        <DButton
          key={placement}
          onClick={() => {
            setToasts((draft) => {
              key += 1;
              draft.push({
                key,
                visible: true,
                placement: placement.toLowerCase(),
              });
            });
          }}
        >
          {placement}
        </DButton>
      ))}
      {toasts.map(({ key, visible, placement }) => (
        <DToast
          key={key}
          dVisible={visible}
          dPlacement={placement}
          onClose={() => {
            setToasts((draft) => {
              draft.find((n) => n.key === key).visible = false;
            });
          }}
        >
          Alert message
        </DToast>
      ))}
    </>
  );
}