NotificationBar

使いどころ

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

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

種類

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

状態

強調

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

アニメーション

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

レイアウト

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

その他

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

使い方

操作のフィードバック

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

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

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

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

動画:コレクションにオブジェクトを、ダイアログから登録する際にNotificationBarを使い成功した旨のメッセージを表示している

スクロール追従するNotificationBar

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

動画:NotificationBarを`positon: sticky`で追従表示している

特別な情報やお知らせ

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

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

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

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

NotificationBarを使ってアプリケーション全体へメッセージを表示している例

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

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

NotificationBarを使ってページ内にメッセージを表示している例

Props

NameRequiredTypeDescription
typetrue"error", "warning", "info", "success"メッセージの種類
bold-false, true強調するかどうか
animate-false, trueスライドインするかどうか
messagetruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalメッセージ
onClose-() => void閉じるボタン押下時に発火させる関数
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalアクション群
role-"alert", "status"role 属性

参考文献

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