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