通知

製品のフィードバックと活動のための柔軟なフローティングメッセージ - 6つのビューポート位置プラス情報、成功、エラー、カスタムアイコン、アバター、アクションボタン、および1つのコンポーネント内の自動ディスクバリアント。

インストール

CLI または手動で通知コンポーネントを追加できます。

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

CLI

手動

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

npx boardui@latest add notification

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

アメリカ

セットセット status 情報、成功、またはエラー。各状態は、セマンティックなライブレギオンロール、デフォルトアイコン、アクセントカラーを供給します。

<Notification  status="information"  title="New version available"  description="Refresh to start using the latest dashboard updates."/>
<Notification  status="success"  title="Changes saved"  description="Your workspace settings have been updated."/>
<Notification  status="error"  title="Upload failed"  description="Check the file size and try again."/>

アイコンとアバター

Remix アイコンをパス アイコンアイコンをアイコンに交換するか、 avatar. アバター通知は、オンライン、忙しい、またはオフラインのプレゼンスを表示することができます。

import { RiSparklingFill } from "@remixicon/react";
{/* Custom icon */}<Notification  icon={RiSparklingFill}  title="Custom icon"  description="Use any Remix icon."/>
{/* Avatar with presence */}<Notification  avatar={{    src: "/avatars/livia-saris.webp",    alt: "Livia Saris",    presence: "busy",  }}  title="Livia Saris"  timestamp="just now"  description="Mentioned you in the launch checklist."/>

アクションボタン

ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ actions 配列は小さいBoardUI ボタンをレンダリングし、プライマリ、セカンダリおよび危険の変形を支えます。

<Notification  status="information"  title="Backup ready"  description="Your latest workspace backup is ready to download."  actions={[    { label: "Not now", variant: "secondary", onClick: dismiss },    { label: "Download", variant: "primary", onClick: download },  ]}/>

求人情報

利用する position プロップオン NotificationViewport ブラウザのビューポートの任意のコーナーまたは横のセンターにスタックを固定する。

import {  Notification,  NotificationViewport,} from "@/components/base/notification/notification";
<NotificationViewport position="top-center">  <Notification    status="information"    title="New version available"    description="Refresh to start using the latest dashboard updates."  /></NotificationViewport>
{/* Available positions:    top-left, top-center, top-right,    bottom-left, bottom-center, bottom-right */}

タイムド却下

セットセット autoDismissDuration ミリ秒で同期3pxカウントダウンバーを表示し、ゼロに達すると通知を却下します。使用 NotificationViewport ブラウザビューポートのエッジで、スムーズなアニメーションスタックへの通知をポータル化します。

const [notifications, setNotifications] = useState([]);
function showNotification(variant) {  setNotifications((current) => [    ...current,    { id: crypto.randomUUID(), variant },  ]);}
<Button onClick={() => showNotification("success")}>Replay notification</Button><Button onClick={() => showNotification("information")}>Information</Button><Button onClick={() => showNotification("error")}>Error</Button><Button onClick={() => showNotification("avatar")}>With avatar</Button><Button onClick={() => showNotification("actions")}>With buttons</Button>
<NotificationViewport>  {notifications.map((notification) => (    <Notification      {...variants[notification.variant]}      key={notification.id}      autoDismissDuration={2500}      introDelay={0}      onDismiss={() =>        setNotifications((current) =>          current.filter((item) => item.id !== notification.id)        )      }    />  ))}</NotificationViewport>