> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/notification.html

> 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.

# Notification 通知提醒

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

## 基本用法


显示通知

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/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

复制代码

```tsx lineNumbers file="../../src/examples/notification/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 时，可以导入这些类型。

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

## NotificationApi API

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

## NotificationOptions API

| 属性            | 类型                                                             | 默认值           | 说明            |
| ------------- | -------------------------------------------------------------- | ------------- | ------------- |
| `key`         | `string`                                                       | —             | 唯一且稳定的标识      |
| `title`       | `ReactNode`                                                    | 必填            | 标题内容          |
| `description` | `ReactNode`                                                    | —             | 补充说明          |
| `type`        | `'success' \| 'info' \| 'warning' \| 'error'`                  | `'info'`      | 显示或选项类型       |
| `icon`        | `ReactNode`                                                    | —             | 自定义图标         |
| `actions`     | `ReactNode`                                                    | —             | 通知操作          |
| `duration`    | `number`                                                       | `4.5`         | 显示秒数，0 表示持续展示 |
| `placement`   | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | 显示位置          |
| `closable`    | `boolean`                                                      | `true`        | 显示关闭操作        |
| `onClose`     | `() => void`                                                   | —             | 关闭时触发         |

## NotificationProps API

| 属性            | 类型                                                             | 默认值           | 说明            |
| ------------- | -------------------------------------------------------------- | ------------- | ------------- |
| `title`       | `ReactNode`                                                    | 必填            | 标题内容          |
| `description` | `ReactNode`                                                    | —             | 补充说明          |
| `type`        | `'success' \| 'info' \| 'warning' \| 'error'`                  | `'info'`      | 显示或选项类型       |
| `icon`        | `ReactNode`                                                    | —             | 自定义图标         |
| `actions`     | `ReactNode`                                                    | —             | 通知操作          |
| `duration`    | `number`                                                       | `4.5`         | 显示秒数，0 表示持续展示 |
| `placement`   | `'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'` | `'top-right'` | 显示位置          |
| `closable`    | `boolean`                                                      | `true`        | 显示关闭操作        |
| `onClose`     | `() => void`                                                   | —             | 关闭时触发         |
| `open`        | `boolean`                                                      | 必填            | 受控展示状态        |
| `afterClose`  | `() => void`                                                   | —             | 离场动画结束        |

## NotificationProviderProps API

| 属性         | 类型          | 默认值 | 说明         |
| ---------- | ----------- | --- | ---------- |
| `children` | `ReactNode` | —   | 内容或下级项目    |
| `maxCount` | `number`    | `5` | 最多同时展示的通知数 |