组件

Notification 通知框

用于全局通知，悬浮在页面角落。

  • Notification.open 打开一个默认通知。
  • Notification.info 打开一个信息通知。
  • Notification.success 打开一个表示成功信息的通知。
  • Notification.warning 打开一个表示警告信息的通知。
  • Notification.error 打开一个表示错误信息的通知。
  • Notification.close 关闭一个通知。
  • Notification.closeAll 关闭所有通知。

获取组件

import { Notification } from 'rsuite';

演示

默认

通知类型

位置

自定义

关闭

延迟关闭

duration 是一个可选项，当设置为 0 时，则不自动关闭。

Methods

Notification.open

Notification.open(props: NotificationProps);

Notification.info

Notification.info(props: NotificationProps);

Notification.success

Notification.success(props: NotificationProps);

Notification.warning

Notification.warning(props: NotificationProps);

Notification.error

Notification.error(props: NotificationProps);

Notification.close

Notification.close(key?: string);

Notification.closeAll

Notification.closeAll();

Types

interface NotificationProps {
  title: React.ReactNode;
  description: React.ReactNode;
  duration?: number;
  placement?: string;
  className?: string;
  style?: React.CSSProperties;
  top?: number;
  bottom?: number;
  key?: string;
  onClose?: () => void;
}
属性名称 类型 (默认值) 描述
bottom number (24) 消息框距离底部的距离
description * React.Node 描述
duration number (4500) 消息框持续时间 (单位：毫秒)
key string 消息框唯一标识，如果要手动移除消息框，必须填写该字段
onClose ()=>void 关闭回调函数
placement enum: NotificationPlacement('topEnd') 消息框的位置
style React.CSSProperties 自定义样式
title * string 标题
top number (24) 消息框距离顶部的距离

相关组件