システムからの通知を表示するためのコンポーネントです。操作結果のフィードバックを表示するとき、ページ全体や特定領域に重要な状態を伝えるときに使います。
import
import { NotificationBar } from 'smarthr-ui'
Props
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| base | "base" | "none" | - | - | - |
| animate | boolean | - | - | - |
| bold | boolean | - | - | - |
| type | "error" | "warning" | "info" | "success" | "sync" | - | ✓ | - |
| subActionArea | ReactNode | - | - | コンポーネント右の領域 |
| onClose | () => void | - | - | 閉じるボタン押下時に発火させる関数 |
| role | "alert" | "status" | - | - | role 属性 |
| layer | 0 | 1 | 2 | 3 | 4 | - | - | - |
実装ルール
NotificationBar に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト
使用上の注意 > フィードバックではないサービス運営上のお知らせなどを画面全体（ヘッダーの下）で使用しない
- [must] NotificationBar を画面全体（ヘッダーの下）で使用する場合は、システムからのフィードバックの表示に限定する
- [must] システムからの応答としてのフィードバックではない、その他の重要なお知らせや情報の表示が必要な場合は、ベースありや InformationPanel などを使用する
使用上の注意 > メッセージは省略表示しない
- [avoid] NotificationBar のメッセージを LineClamp で省略表示しない
- [should] NotificationBar のメッセージは簡潔な一行程度の文章になるように調整する
- [should] どうしても情報量や他の要素を併記する必要がある場合は、テキストリンクで移動先のヘルプページなどに情報を記載するか、ベースありや InformationPanel などを使用して十分な表示領域を確保する
状態 > 強調
- [should] ユーザーへのアテンションを高めたい場合は、
boldにすることを検討する- ユーザーが行なった操作の成功・失敗などの結果を画面全体（ヘッダーの下）に表示する場合
状態 > レイアウト > ベースあり
- [should] 特定の操作範囲へのフィードバックなど Base 内に配置する場合を除き、画面内に単体で配置する場合は基本的に
base="base"を使用する
デザインパターン > ページ全体の操作へのフィードバック
- [must] ページ全体の操作へのフィードバックでは、メッセージが表示されたことを強調するためにアニメーションを有効にする
- [avoid] NotificationBar を時間の経過で閉じない（ユーザーの明示的な操作で非表示にする）
デザインパターン > ページ全体の操作へのフィードバック > 操作箇所から離れている場合はスクロール追従するようにフィードバックを表示
- [should] 操作するボタンなどと NotificationBar が視覚的に離れている場合は、
position: stickyでスクロールに追従させる
モバイル > メッセージの折り返し
- [should] モバイルでメッセージが複数行になっても見づらくならないよう、冗長な表現を避けて端的なメッセージになるように検討する
- [should] モバイルでどうしても長くなり見づらくなる場合は、テキストリンクで移動先のヘルプページに情報を記載するか、ベースありや InformationPanel などの使用も検討する
モバイル > 特定の操作範囲へのフィードバックでの表示位置
- [should] モバイルで NotificationBar が操作範囲外に表示される場合は、ユーザーがフィードバックを確認できる位置での表示方法を検討する