NotificationBar

使いどころ

NotificationBarは、フィードバックやメッセージを伝えるために使います。

• 操作後に、ダイアログ内や画面全体が切り替わるとき
• ダイアログで操作し、元の画面に戻るとき
• 特別で重要な情報やお知らせを表示するとき

種類

メッセージで伝えたいことや、メッセージの重要度に合わせて4種類を定義しています。

状態

強調

ユーザーへのアテンションを高めたい場合は、bold={true}にすることを検討します。

アニメーション

メッセージが表示されたことを強調したい場合は、animate={true}にすることでスライドインのアニメーション効果を追加できます。

レイアウト

非推奨ですがLineClampコンポーネントも使えます。

その他

ボタンやテキストリンクを表示したり、常時表示したいときは「閉じる」ボタンを非表示にできます。

使い方

操作のフィードバック

主に「操作後に、ダイアログ内や画面全体が切り替わるとき」や「ダイアログで操作し、元の画面に戻るとき」などに使います。

• ユーザーにメッセージが表示されたことを強調するために、アニメーションを有効にします。
• ユーザーの明示的な操作で非表示にします。時間の経過で閉じることは非推奨されません（※1）。

ダイアログからコレクションにオブジェクトを新規追加した後のメッセージ

コレクションにオブジェクトを追加した際に、フィードバックを表示する典型的な例です。
以下の例では操作が成功したためtype="success"にしていますが、エラーの場合はerrorを指定してメッセージを返します。

スクロール追従するNotificationBar

操作するボタンなどと、NotificationBarによるメッセージの距離が離れている場合は、positon: stickyでスクロールに追従させ、メッセージに気づきやすくすることを推奨します。 以下の例では、スクロールに関わらずNotificationBarを画面上部に固定表示しています。

特別な情報やお知らせ

主に「特別で重要な情報やお知らせを出したいとき」に使うケースです。

• 基本的に、bold={false}で使うことを推奨します。破壊的な変更や必ず見てほしい重要情報など必要に応じて強調してください。
• 特別な情報やお知らせで設置するコンポーネントと表示位置は、情報構造に合わせて設計します。NotificationBarでの代表的な使い方は以下を参照してください。
  • 同様の役割は、InformationPanelやCompactInformationPanelが担うこともあります。

アプリケーション全体にメッセージを表示する

アプリケーション全体にメッセージを表示している例です。
アプリケーション内で画面を切り替えてもメッセージが表示され続けることを表すため、Headerよりも上に配置します。また、必ず見てもらいたいメッセージなのでbold={true}にしています。

ページにメッセージを表示する

ページ内にメッセージを表示している例です。
「ダッシュボード」の配下のみに関わる情報であることを表すために、AppNaviの下にNotificationBarを配置します。

Props

参考文献

※1. Web Content Accessibility Guidelines - 2.2.1 タイミング調整可能を理解する