useNotifications

用于显示和与应用程序通知交互的命令式 API。

Toolpad Core 提供了一组抽象，使与通知的交互更加容易。通知用于向用户提供有关应用程序生命周期中正在发生的事件的简短更新。它们出现在屏幕底部。Toolpad API 允许同时打开多个通知。

要访问通知 API，您需要做的第一件事是安装 NotificationsProvider。

import { NotificationsProvider } from '@toolpad/core/useNotifications';

function App({ children }) {
  return <NotificationsProvider>{children}</NotificationsProvider>;
}

现在您可以通过 useNotifications Hook 访问通知 API。

import { useNotifications } from '@toolpad/core/useNotifications';

function MyApp() {
  const notifications = useNotifications();
  // ...
}

基本通知

您可以通过调用 notifications.show 来使用中性消息通知您的用户。要使通知自动隐藏，请添加 autoHideDuration 选项。这表示在多少毫秒后关闭通知。

notifications.show('Consider yourself notified!', {
  autoHideDuration: 3000,
});

notifications.show('Consider yourself notified!', {
  autoHideDuration: 3000,
});

按 Enter 开始编辑

警报通知

您可以使用 severity 属性以警报的形式发送通知。它接受来自 "info"、"success"、"warning" 或 "error" 的值。

严重程度

信息成功警告错误

notifications.show('Consider yourself notified!', {
  severity,
  autoHideDuration: 3000,
});

notifications.show('Consider yourself notified!', {
  severity,
  autoHideDuration: 3000,
});

按 Enter 开始编辑

多个通知

多个并发通知会堆叠在一起，当有多个通知可用时，会显示一个带有打开通知数量的徽章。通过以下演示尝试一下

notifications.show('Hello', { autoHideDuration: 1000 });
notifications.show('Goodbye', { autoHideDuration: 1000 });

notifications.show('Hello', { autoHideDuration: 1000 });
notifications.show('Goodbye', { autoHideDuration: 1000 });

按 Enter 开始编辑

关闭通知

您可以编程方式关闭现有通知。每个通知都有一个关联的键。您可以调用带有此键的 notifications.close 方法来关闭已打开的通知。

在线

const key = online
  ? notifications.show('You are now online', {
      severity: 'success',
      autoHideDuration: 3000,
    })
  : notifications.show('You are now offline', {
      severity: 'error',
    });

return () => {
  notifications.close(key);
};

const key = online
  ? notifications.show('You are now online', {
      severity: 'success',
      autoHideDuration: 3000,
    })
  : notifications.show('You are now offline', {
      severity: 'error',
    });

return () => {
  notifications.close(key);
};

按 Enter 开始编辑

去重通知

您可以为您显示的通知提供自己的键值，以将它们与此键关联。只要已有一个通知打开，具有相同键的通知就会被去重。如果您尝试显示具有相同键的通知，则该调用将被简单地忽略。

notifications.show('Listen carefully, I will say this only once', {
  key: 'dedupe-notification',
  autoHideDuration: 5000,
});

notifications.show('Listen carefully, I will say this only once', {
  key: 'dedupe-notification',
  autoHideDuration: 5000,
});

按 Enter 开始编辑

作用域通知

通知提供器可以嵌套。这样，您可以将通知的作用域限定为页面的子集。使用插槽将 Snackbar 相对于页面上的特定元素进行定位。

<NotificationsProvider slots={notificationsProviderSlots}>
  <ScopedContent />
</NotificationsProvider>

<NotificationsProvider slots={notificationsProviderSlots}>
  <ScopedContent />
</NotificationsProvider>

按 Enter 开始编辑

自定义

要自定义通知体验，例如通知的位置，请向 NotificationsProvider 提供自定义的 Snackbar 配置。当在提供器级别应用时，此配置将全局设置应用程序中所有通知的行为。

<NotificationsProvider
  slotProps={{
    snackbar: {
      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
    },
  }}
>

🚧 通知中心

当有多个通知可用时，单击徽章以打开通知中心，以显示所有可用通知的可滚动列表。此功能尚不可用。

Hook API

useNotifications()

API

请参阅下面的文档，获取此处提及的组件的所有可用 props 和类的完整参考。

<NotificationsProvider />