通知センター

3つのアニメーションフィルタタブ、グループ化されたタイムライン、未読状態、アバターおよびステータスビジュアル、オプションのインラインアクション、マークオール読み取り動作、および構成された空の状態を備えた完全なアクティビティの受信トレイ。

インストール

CLI または手動で通知センターアプリケーションブロックを追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add notification-center

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

フィルタリング

中心はデフォルトで活動的なフィルターを所有します。使用して下さい defaultTab 初期ビューの場合、またはコンバイン tab そして、 onTabChange 周囲のプロダクトが制御された状態を必要とするとき。

<NotificationCenter  notifications={notifications}  defaultTab="mentions"/>
{/* Controlled filtering */}<NotificationCenter  notifications={notifications}  tab={activeTab}  onTabChange={setActiveTab}/>

通知データとアクション

各項目は、フィルタカテゴリとタイムライングループを宣言します。アバターまたはセマンティックステータスアイコンを追加し、設定します。 unread, 小さなアクションを添付. アクションは、項目が両方のIDを読み、報告するマークを押します onAction.

const notification = {  id: "deploy-failed",  category: "system", // mentions | system | activity  group: "Earlier this week",  title: "Preview deployment failed",  description: "The build stopped while validating routes.",  timestamp: "Sat",  unread: true,  status: "error", // neutral | information | success | error  actions: [    { id: "retry", label: "Retry", variant: "primary" },    { id: "logs", label: "View logs", variant: "secondary" },  ],};