Notification 通知

在屏幕角落显示全局通知消息。

导入

import { notification } from 'asterui'

示例

基础通知

具有简单消息的不同通知类型。

import { notification, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          color="primary"
          onClick={() =>
            notification.success({
              message: 'Success',
              description: 'Your changes have been saved successfully.',
            })
          }
        >
          Success
        </Button>
  
        <Button
          onClick={() =>
            notification.error({
              message: 'Error',
              description: 'Failed to save changes. Please try again.',
            })
          }
        >
          Error
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Information',
              description: 'This is an informational message.',
            })
          }
        >
          Info
        </Button>
  
        <Button
          onClick={() =>
            notification.warning({
              message: 'Warning',
              description: 'Your session will expire in 5 minutes.',
            })
          }
        >
          Warning
        </Button>
      </Space>
    )
}

export default App

位置

在不同的角落位置显示通知。

import { notification, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() =>
            notification.success({
              message: 'Top Left',
              description: 'Notification from top left corner.',
              placement: 'topLeft',
            })
          }
        >
          Top Left
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Top Right',
              description: 'Notification from top right corner.',
              placement: 'topRight',
            })
          }
        >
          Top Right
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Bottom Left',
              description: 'Notification from bottom left corner.',
              placement: 'bottomLeft',
            })
          }
        >
          Bottom Left
        </Button>
  
        <Button
          onClick={() =>
            notification.success({
              message: 'Bottom Right',
              description: 'Notification from bottom right corner.',
              placement: 'bottomRight',
            })
          }
        >
          Bottom Right
        </Button>
      </Space>
    )
}

export default App

自定义持续时间

控制通知保持可见的时长。

import { notification, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button
          onClick={() =>
            notification.info({
              message: 'Quick Message',
              description: 'This will close in 2 seconds.',
              duration: 2,
            })
          }
        >
          2 seconds
        </Button>
  
        <Button
          color="primary"
          onClick={() =>
            notification.info({
              message: 'Standard Message',
              description: 'This uses the default duration (4.5s).',
            })
          }
        >
          Default (4.5s)
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Long Message',
              description: 'This will stay visible for 10 seconds.',
              duration: 10,
            })
          }
        >
          10 seconds
        </Button>
  
        <Button
          onClick={() =>
            notification.info({
              message: 'Persistent',
              description: 'This will not auto-close. Click to dismiss.',
              duration: 0,
            })
          }
        >
          No Auto-close
        </Button>
      </Space>
    )
}

export default App

API

Config 对象

属性	描述	类型	默认值
`message`	通知标题	`React.ReactNode`	-
`description`	通知内容	`React.ReactNode`	-
`duration`	自动关闭持续时间(秒)	`number`	`4.5`
`placement`	通知位置	`'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'`	`'topRight'`
`type`	通知类型(用于 notification.open)	`'success' \| 'error' \| 'info' \| 'warning'`	-

方法

notification.success(config) - 成功通知
notification.error(config) - 错误通知
notification.info(config) - 信息通知
notification.warning(config) - 警告通知
notification.open(config) - 具有自定义类型的通用通知

可访问性

使用 role="alert" 进行屏幕阅读器公告
通知可通过键盘访问,可以使用 Escape 键关闭
颜色和图标为可访问性提供冗余信息
持续时间设置为 0 会创建需要手动关闭的持久通知