Notify component
npm install @uiw/react-notifyNotify 消息通知
===
全局展示通知提醒信息。
``jsx`
import { Notify } from 'uiw';
// or
import Notify from '@uiw/react-notify';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Button, Notify } from 'uiw';
export default function Demo() {
return (
$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Button, Notify } from 'uiw';export default function Demo() {
return (
Notify.success({ placement: 'topLeft', title: '成功通知', description: '最简单的用法，4.5 秒后自动关闭。' });
}}
>
↖上左弹出通知
Notify.warning({
placement: 'topRight',
title: '警告通知',
description: '最简单的用法，4.5 秒后自动关闭。',
onClose: () => {
console.log('~~~~>')
}
});
}}
>
↗上右弹出通知
Notify.info({ placement: 'bottomLeft', title: '说明通知', description: '最简单的用法，4.5 秒后自动关闭。' });
}}
>
↙下左弹出通知
Notify.error({ placement: 'bottomRight', title: '错误通知', description: '最简单的用法，4.5 秒后自动关闭。' });
}}
>
↘下右通知
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Button, Notify } from 'uiw';export default function Demo() {
return (
Notify.success({
placement: 'topRight',
title: '警告通知',
duration: null,
description: '最简单的用法，弹出通知不消失。'
});
}}
>
↗上右弹出通知
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Button, Notify } from 'uiw';export default function Demo() {
return (
Notify.warning({
placement: 'topRight',
duration: null,
description: '标题不展示，可以通过关闭按钮关闭。',
});
}}
>
↗上右弹出通知
Notify.info({ placement: 'bottomLeft', description: '最简单的用法，4.5 秒后自动关闭。' });
}}
>
↙下左弹出通知
Notify.error({ placement: 'bottomRight', description: '最简单的用法，4.5 秒后自动关闭。' });
}}
>
↘下右通知
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Button, Notify } from 'uiw';export default function Demo() {
return (
Notify.warning({
placement: 'topRight',
duration: null,
title: '警告通知，最简单的用法，只展示标题，点击按钮关闭。',
});
}}
>
↗上右弹出通知
);
}
`$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Button, Notify } from 'uiw';export default function Demo() {
return (
Notify.error({ placement: 'bottomRight', icon: null, description: '最简单的用法，4.5 秒后自动关闭。最简单的用法，4.5 秒后自动关闭。最简单的用法，4.5 秒后自动关闭。最简单的用法，4.5 秒后自动关闭。' });
}}
>
↘下右通知
Notify.success({
placement: 'topRight',
title: '警告通知',
icon: null,
duration: null,
description: '最简单的用法，4.5 秒后自动关闭。最简单的用法，4.5 秒后自动关闭。最简单的用法，4.5 秒后自动关闭。'
});
}}
>
↗上右弹出通知
);
}
`Notify
js
Notify.open(config);
Notify.success(config);
Notify.warning(config);
Notify.info(config);
Notify.error(config);
`参数
如下：| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| title | 通知提醒标题，必选 | String/ReactNode | ReactNode |
| icon | 设置为
false 将不显示图标 | String/ReactNode | ReactNode |
| description | 通知提醒内容，必选 | String/ReactNode | ReactNode |
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | Number | 4.5 |
| placement | 弹出位置，可选 | Enum{topLeft, topRight, bottomLeft, bottomRight} | topRight |
| onClose | 当提醒关闭时的回调函数 | Function | none |