フィードバックの概要
処理結果、進行状況、注意、完了をユーザーへ返すためのコンポーネント群です。通知の強さ、表示時間、操作を求めるかどうかで使い分けます。
コンポーネント一覧
各コンポーネントの詳細ページへ移動して、プレビュー、コード、プロパティを確認できます。
アラート
Alert注意を促すためのコールアウトを表示します。
バナー
Bannerページ全体に関係するお知らせや状態を横長のバーで表示します。
通知センター
NotificationCenter通知の一覧と管理用の UI です。
進捗バー
Progressタスクの進捗を示すインジケーターです。
進捗ウィジェット
ProgressWidget進捗値、補足文、進捗バーをカードとしてまとめて表示します。
スピナー
Spinner処理中であることを示すインジケーターです。
ステータスバー
StatusBarステータスや情報を表示するバーです。
ステータス画面
StatusScreen404、エラー、オフライン、権限なし、メンテナンス、公開前など、全画面の状態フィードバックを表示します。
ステッパー
Stepper複数ステップの進行状況を、完了・現在地・未完了の状態で示すコンポーネントです。
トースト
Toast一時的に表示する短いメッセージです。
トーストプロバイダ
ToastProviderトーストの表示と管理を行います。
補足情報
一覧でコンポーネントを選んだあとに確認する、カテゴリ全体の責務、共通ルール、使い分けです。
このカテゴリの責務
ページや操作の結果を、ユーザーが次に判断できる粒度で返します。永続表示、短時間表示、進行中表示を混ぜずに選びます。
このページの使い方
まずカテゴリの責務を確認し、迷いやすい使い分けから該当コンポーネントへ移動します。
パターンで確認する場面
フォーム送信、メディア操作、チャット、管理画面など、複数コンポーネントを組み合わせた場面で通知の強さと位置を確認します。
フィードバック系の共通ルール
カテゴリ内で共通して守るべき判断基準です。
状態色だけで意味を伝えず、タイトルや説明で何が起きたかを明示します。
操作できない状態や失敗時は、理由と次の行動を近くに置きます。
迷いやすい使い分け
似ているコンポーネントを選ぶ時の入口です。
ページ内に残す注意は Alert、画面上部の横長通知は Banner、短時間の完了通知は Toast を使います。
単純な進捗は Progress、進捗に状態や操作が伴う場合は ProgressWidget を使います。
最初に確認するページ
通知の強さと表示時間を決める時に、まず確認するコンポーネントです。
避ける使い方
フィードバックは目立たせるだけでなく、次に何をすべきかを伝える必要があります。
色だけで成功、警告、失敗を伝える。
破壊的な操作や復旧不能な操作を Toast だけで済ませる。
処理中の残り作業や失敗理由を、進捗バーから切り離して遠くに置く。