For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/notification.md.

Notification 通知提醒

在页面角落展示通知与后续操作。

基本用法

basic.tsx
import { Button, useNotification } from '@ifhover/leaf-ui';

export function NotificationBasic() {
  const notification = useNotification();
  return (
    <Button
      onClick={() =>
        notification.open({
          title: '报告已生成',
          description: '你的月度报告已准备好,可以下载查看。',
          actions: (
            <Button size="sm" onClick={() => notification.close()}>
              知道了
            </Button>
          ),
        })
      }
    >
      显示通知
    </Button>
  );
}

更多用法

advanced.tsx
import { Button, Space, useNotification } from '@ifhover/leaf-ui';

export function NotificationOptions() {
  const notification = useNotification();
  return (
    <Space wrap>
      <Button
        variant="outline"
        onClick={() =>
          notification.success({
            title: '保存成功',
            description: '所有更改已保存。',
            placement: 'bottom-right',
          })
        }
      >
        成功通知
      </Button>
      <Button
        variant="outline"
        danger
        onClick={() =>
          notification.error({
            key: 'sync',
            title: '同步失败',
            description: '请检查连接后重试。',
            duration: 0,
          })
        }
      >
        持续错误通知
      </Button>
      <Button
        variant="soft"
        onClick={() => notification.open({ key: 'sync', title: '重新同步中', duration: 2 })}
      >
        更新同一通知
      </Button>
    </Space>
  );
}

使用说明

在应用外层放置 ConfigProvider 后,在子组件直接调用 useNotification()。单独使用时放置 NotificationProvider。相同 key 更新通知,duration={0} 持续展示。

类型

组装数据、定义回调和使用 ref 时,可以导入这些类型。

import type { NotificationApi, NotificationOptions, NotificationProps, NotificationProviderProps } from '@ifhover/leaf-ui';

NotificationApi API

属性类型默认值说明
open(options: NotificationOptions) => string必填显示通知并返回标识
success(options: Omit<NotificationOptions, 'type'>) => string必填显示成功通知
info(options: Omit<NotificationOptions, 'type'>) => string必填显示信息通知
warning(options: Omit<NotificationOptions, 'type'>) => string必填显示警告通知
error(options: Omit<NotificationOptions, 'type'>) => string必填显示错误通知
close(key?: string) => void必填关闭指定标识;省略则关闭全部

NotificationOptions API

属性类型默认值说明
keystring—唯一且稳定的标识
titleReactNode必填标题内容
descriptionReactNode—补充说明
type'success' | 'info' | 'warning' | 'error''info'显示或选项类型
iconReactNode—自定义图标
actionsReactNode—通知操作
durationnumber4.5显示秒数,0 表示持续展示
placement'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'显示位置
closablebooleantrue显示关闭操作
onClose() => void—关闭时触发

NotificationProps API

属性类型默认值说明
titleReactNode必填标题内容
descriptionReactNode—补充说明
type'success' | 'info' | 'warning' | 'error''info'显示或选项类型
iconReactNode—自定义图标
actionsReactNode—通知操作
durationnumber4.5显示秒数,0 表示持续展示
placement'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'显示位置
closablebooleantrue显示关闭操作
onClose() => void—关闭时触发
openboolean必填受控展示状态
afterClose() => void—离场动画结束

NotificationProviderProps API

属性类型默认值说明
childrenReactNode—内容或下级项目
maxCountnumber5最多同时展示的通知数