Message 消息框

用于页面中展示重要的提示信息。

获取组件 

import { Message, useToaster } from 'rsuite';

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

演示

默认

类型

显示图标

可关闭的

消息框撑满容器

与 toaster 组合

一种包含 Alert 的消息类型

Props & Hooks

<Message>

属性名称 类型 (默认值) 描述
children ReactNode 消息描述信息
classPrefix string ('message') 组件 CSS 类的前缀
closable boolean 可以关闭消息框
duration number (2000) 延迟自动关闭消息，与 toaster 组合使用时候才有效。当设为 0 时候，则不自动关闭通知 (单位: 毫秒)
full boolean 撑满容器
header ReactNode 消息标题
onClose (event?: MouseEvent) => void 消息关闭后调用
showIcon boolean 显示图标
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;
Vercel banner