Notification 通知框

用于系统通知。 通常用于推送消息。

获取组件 

import { Notification, useToaster } from 'rsuite';

// or
import Notification from 'rsuite/Notification';
import { useToaster } from 'rsuite/toaster';

演示

默认

通知类型

可关闭的

与 toaster 组合

Props & Hooks

<Notification>

Property Type (Default) Description
children * ReactNode 通知的内容
closable boolean 是否显示关闭按钮
duration number (4500) 延迟自动关闭通知，与 toaster 组合使用时候才有效。当设为 0 时候，则不自动关闭通知 (单位: 毫秒)
header * string 通知的标题
onClose () => void 通知被移除后的回调函数
placement Placement('topCenter') 通知出现的位置
type 'info' | 'success' | 'warning' | 'error' ('info') 通知类型

useToaster

useToaster 是一个用于创建和管理 Toast 的 React Hook。

import { useToaster } from 'rsuite';

return () => {
  const toaster = useToaster();

  ...
};

toaster.push

推送一个消息，并返回一个唯一的 key

type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';

interface ToastContainerProps{
  /** 消息框的位置 */
  placement?: PlacementType;

  /** 设置消息出现在指定的容器中 */
  container?: HTMLElement | (() => HTMLElement);

  /** 自动关闭消息前等待的毫秒数 */
  duration?: number;
}

toaster.push(message: ReactNode, options?: ToastContainerProps): string;

e.g:

// 弹出一个消息
toaster.push(<Message>message</Message>);

// 弹出一个消息，并设置自动关闭的时间
toaster.push(<Message>message</Message>, {
  duration: 1000
});

// 弹出一个通知, 并设置位置
toaster.push(<Notification>message</Notification>, {
  placement: 'topEnd'
});

toaster.remove

通过 key 删除一个消息

toaster.remove(key: string): void;

e.g:

const key = toaster.push(<Notification>message</Notification>, {
  placement: 'topEnd'
});

toaster.remove(key);

toaster.clear

删除所有消息

toaster.clear(): void;

ts:Placement 

type Placement = 'topStart' | 'topCenter' | 'topEnd' | 'bottomStart' | 'bottomCenter' | 'bottomEnd';
Vercel banner