Notice 提示框

使用场景

用于展示系统状态，或页面功能。

示例

基本用法

您当前的浏览器已过期，请使用最新版的浏览器！

inline

() => <Notice status="error" title="您当前的浏览器已过期，请使用最新版的浏览器！" />

() => <Notice status="error" title="您当前的浏览器已过期，请使用最新版的浏览器！" />

右侧包含执行动作

您当前的浏览器已过期，请使用最新版的浏览器！

查看详情

inline

() => ( <Notice status="error" title="您当前的浏览器已过期，请使用最新版的浏览器！" extra={<Link>查看详情</Link>} /> )

() => (
  <Notice status="error" title="您当前的浏览器已过期，请使用最新版的浏览器！" extra={<Link>查看详情</Link>} />
)

可关闭

您当前的浏览器已过期！

请升级到最新版的浏览器，否则部分功能可能不可用！

inline

function Closeable() { const [visible, setVisible] = useState(true); const onClose = () => setVisible(false); return ( <Box> {visible && ( <Notice status="error" title="您当前的浏览器已过期！" closeable onClose={onClose}> 请升级到最新版的浏览器，否则部分功能可能不可用！ </Notice> )} </Box> ); }

function Closeable() {
  const [visible, setVisible] = useState(true);
  const onClose = () => setVisible(false);

  return (
    <Box>
      {visible && (
        <Notice status="error" title="您当前的浏览器已过期！" closeable onClose={onClose}>
          请升级到最新版的浏览器，否则部分功能可能不可用！
        </Notice>
      )}
    </Box>
  );
}

状态

发起的请求出现错误

文件已上传成功

你的账号密码似乎已经过期，请尽快更换

Hippo 将在 2021 年 3 月发布新版本更新

inline

() => ( <Grid spacingY="l" columns={1}> <Notice status="error" title="发起的请求出现错误" /> <Notice status="success" title="文件已上传成功" /> <Notice status="warning" title="你的账号密码似乎已经过期，请尽快更换" /> <Notice status="info" title="Hippo 将在 2021 年 3 月发布新版本更新" /> </Grid> )

() => (
  <Grid spacingY="l" columns={1}>
    <Notice status="error" title="发起的请求出现错误" />
    <Notice status="success" title="文件已上传成功" />
    <Notice status="warning" title="你的账号密码似乎已经过期，请尽快更换" />
    <Notice status="info" title="Hippo 将在 2021 年 3 月发布新版本更新" />
  </Grid>
)

快捷调用

Notice.show(config)

根据 config 打开一个 Notice Toast，config 中可以传递 Notice 的配置，也可以传递 Toast 的配置。

inline

function Basic() { return ( <div style={{ display: 'flex', gap: 8, flexFlow: 'wrap' }}> <Button onClick={() => { Notice.show({ status: 'error', title: '您当前的浏览器已过期，请使用最新版的浏览器！', extra: <Link>查看详情</Link>, closeable: true, }); }} > show notice </Button> <Button onClick={() => { Notice.success({ title: '文件已上传成功', extra: <Link>查看详情</Link>, closeable: true, }); }} > notice.success(...) </Button> <Button onClick={() => { Notice.info({ title: '文件已上传成功', extra: <Link>查看详情</Link>, closeable: true, }); }} > notice.info(...) </Button> <Button onClick={() => { Notice.warning({ title: '你的密码已过期，请尽快更换', extra: <Link>更换密码</Link>, closeable: true, }); }} > notice.warning(...) </Button> <Button style={{ marginLeft: 8 }} onClick={() => { Notice.closeAll(); }} > 关闭所有消息 </Button> </div> ); }

function Basic() {
  return (
    <div style={{ display: 'flex', gap: 8, flexFlow: 'wrap' }}>
      <Button
        onClick={() => {
          Notice.show({
            status: 'error',
            title: '您当前的浏览器已过期，请使用最新版的浏览器！',
            extra: <Link>查看详情</Link>,
            closeable: true,
          });
        }}
      >
        show notice
      </Button>

      <Button
        onClick={() => {
          Notice.success({
            title: '文件已上传成功',
            extra: <Link>查看详情</Link>,
            closeable: true,
          });
        }}
      >
        notice.success(...)
      </Button>

      <Button
        onClick={() => {
          Notice.info({
            title: '文件已上传成功',
            extra: <Link>查看详情</Link>,
            closeable: true,
          });
        }}
      >
        notice.info(...)
      </Button>

      <Button
        onClick={() => {
          Notice.warning({
            title: '你的密码已过期，请尽快更换',
            extra: <Link>更换密码</Link>,
            closeable: true,
          });
        }}
      >
        notice.warning(...)
      </Button>

      <Button
        style={{ marginLeft: 8 }}
        onClick={() => {
          Notice.closeAll();
        }}
      >
        关闭所有消息
      </Button>
    </div>
  );
}

快捷调用支持以下方法：

• Notice.show
• Notice.error
• Notice.success
• Notice.warning
• Notice.info
• Notice.config 同 Toaster.config;
• Notice.getConfig 同 Toaster.getConfig;
• Notice.close 同 Toaster.close;
• Notice.closeAll 同 Toaster.closeAll;

Notice.useNotice()

当你需要使用 Context 时，可以通过 Notice.useNotice() 创建一个 contextHolder 插入子节点中。通过 hooks 创建的临时 Notice 将会得到 contextHolder 所在位置的上下文。创建的 notice 对象拥有以下方法：show/error/success/warning/info/close/closeAll。

const [notice, contextHolder] = Notice.useNotice();

React.useEffect(() => {

notice.show({ content: 'hello!' });

}, []);

return <div>{contextHolder}</div>;

API

字段	描述
status*	"error" | "success" | "warning" | "info" 状态
title	string 标题
extra	ReactNode 标题附加内容节点
closeable	boolean 是否可关闭
onClose	MouseEventHandler<HTMLButtonElement> 点击关闭按钮的回调
className	string
style	CSSProperties