Toaster 吐司提示

吐司提示，用于全局展示通知、提醒信息。

使用场景

在系统四个角显示通知提醒信息。经常用于以下情况：

• 较为复杂的通知内容。
• 带有交互的通知，给出用户下一步的行动点。
• 系统主动推送。

使用方式

全局用法

inline

function BasicDetached() { return ( <div> <Button onClick={() => { Toaster.show({ content: 'hello!' }); }} > Toaster.show(...) </Button> <Button style={{ marginLeft: 8 }} onClick={() => { Toaster.closeAll(); }} > 关闭所有消息 </Button> </div> ); }

function BasicDetached() {
  return (
    <div>
      <Button
        onClick={() => {
          Toaster.show({ content: 'hello!' });
        }}
      >
        Toaster.show(...)
      </Button>
      <Button
        style={{ marginLeft: 8 }}
        onClick={() => {
          Toaster.closeAll();
        }}
      >
        关闭所有消息
      </Button>
    </div>
  );
}

hooks 用法

注意 contextHolder 需要插入到子节点中。

inline

function Basic() { const [toaster, contextHolder] = Toaster.useToaster({ placement: 'top-right' }); return ( <div> {contextHolder} <Button onClick={() => { toaster.show({ content: 'hello!' }); }} > toaster.show(...) </Button> <Button style={{ marginLeft: 8 }} onClick={() => { toaster.closeAll(); }} > 关闭所有消息 </Button> </div> ); }

function Basic() {
  const [toaster, contextHolder] = Toaster.useToaster({ placement: 'top-right' });

  return (
    <div>
      {contextHolder}
      <Button
        onClick={() => {
          toaster.show({ content: 'hello!' });
        }}
      >
        toaster.show(...)
      </Button>
      <Button
        style={{ marginLeft: 8 }}
        onClick={() => {
          toaster.closeAll();
        }}
      >
        关闭所有消息
      </Button>
    </div>
  );
}

示例

多个 toast 容器

inline

function MultipleToaster() { const [toaster1, node1] = Toaster.useToaster({ placement: 'top-right' }); const [toaster2, node2] = Toaster.useToaster({ placement: 'top' }); return ( <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'flex-start', gap: 16 }}> {node1} {node2} <Button onClick={() => toaster1.show({ content: 'hello!' })} style={{ fontFamily: 'monospace' }}> toaster1.show('hello!') </Button> <Button onClick={() => toaster1.closeAll()} style={{ fontFamily: 'monospace' }}> toaster1.closeAll() </Button> <div style={{ margin: '12px 0', width: '100%', height: 1, borderTop: '1px solid var(--rex-colors-emphasis-30)', }} /> <Button style={{ fontFamily: 'monospace' }} onClick={() => { toaster2.show({ content: 'hello!' }); }} > toaster2.show('world!') </Button> <Button style={{ fontFamily: 'monospace' }} onClick={() => { toaster2.show({ content: <h1 style={{ height: 250 }}>BIG</h1>, canCloseByClick: false, }); }} > toaster2.show(big) </Button> <Button style={{ fontFamily: 'monospace' }} onClick={() => { toaster2.closeAll(); }} > toaster2.closeAll() </Button> </div> ); }

function MultipleToaster() {
  const [toaster1, node1] = Toaster.useToaster({ placement: 'top-right' });
  const [toaster2, node2] = Toaster.useToaster({ placement: 'top' });

  return (
    <div style={{ display: 'flex', flexFlow: 'column', alignItems: 'flex-start', gap: 16 }}>
      {node1}
      {node2}

      <Button onClick={() => toaster1.show({ content: 'hello!' })} style={{ fontFamily: 'monospace' }}>
        toaster1.show('hello!')
      </Button>
      <Button onClick={() => toaster1.closeAll()} style={{ fontFamily: 'monospace' }}>
        toaster1.closeAll()
      </Button>

      <div
        style={{
          margin: '12px 0',
          width: '100%',
          height: 1,
          borderTop: '1px solid var(--rex-colors-emphasis-30)',
        }}
      />

      <Button
        style={{ fontFamily: 'monospace' }}
        onClick={() => {
          toaster2.show({ content: 'hello!' });
        }}
      >
        toaster2.show('world!')
      </Button>
      <Button
        style={{ fontFamily: 'monospace' }}
        onClick={() => {
          toaster2.show({
            content: <h1 style={{ height: 250 }}>BIG</h1>,
            canCloseByClick: false,
          });
        }}
      >
        toaster2.show(big)
      </Button>
      <Button
        style={{ fontFamily: 'monospace' }}
        onClick={() => {
          toaster2.closeAll();
        }}
      >
        toaster2.closeAll()
      </Button>
    </div>
  );
}

API

快捷调用

Toaster.show(config): string

根据 config 打开一个快捷对话框，config.title 作为对话框的标题， config.content 作为对话框的内容，其他属性详见 Dialog Props

返回一个字符串 key 表示该对话框实例，调用 Dialog.close(key) 可以主动关闭该对话框。

Toaster.close(key)

关闭一个提示信息。

Toaster.closeAll()

关闭所有提示信息。

Toaster.useToaster()

当你需要使用 Context 时，可以通过 Toaster.useToaster() 创建一个 contextHolder 插入子节点中。通过 hooks 创建的临时 Toaster 将会得到 contextHolder 所在位置的上下文。创建的 toaster 对象拥有与默认 Toaster 相同的方法（show/close/closeAll）。

const [toaster, contextHolder] = Toaster.useToaster();

React.useEffect(() => {

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

}, []);

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

Toaster Props

字段	描述
placement	PositionPlacement
duration	number
canCloseByClick	boolean
浮层容器
usePortal	boolean 是否使用 portal 来渲染弹层内容
portalContainer	HTMLElement | "DOCUMENT_BODY" 渲染组件的容器
disableScroll	boolean | "force" 是否禁用容器的滚动