InformationPanel

ユーザーに伝えたい情報を視覚的に目立たせるパネルコンポーネントです。複数行のテキストや複数項目の不備一覧など、ResponseMessageNotificationBarでは収まらない量のフィードバック情報などを表示するときに使います。

使用上の注意

短い一文で説明できるものに使用しない

見出しと内容を必ずセットにして使用してください。短い一文で説明できる場合は、ResponseMessageNotificationBar[base=“base”]が適しています。

詳しい使い分けはフィードバック - 同期的な処理が完了したときを参照してください。

白背景の中に配置しない

InformationPanelの背景色は白いため、Baseやダイアログコンテンツなど背景が白い要素の中にそのまま配置しないでください。

BaseColumnのなかや、背景色をCOLUMNOVER_BACKGROUNDなどの白以外に変更したBaseやダイアログコンテンツのなかであれば配置できます。

InformationPanelでは視覚的に強調されすぎる場合は、削除ダイアログの注意事項のようにBaseColumnを使った代替パターンも検討してください。

Do
Do
Baseの背景色がOVER_BACKGROUNDになっている
Do
Do
BaseのなかでBaseColumnを使って代替されている
Dont
Don't
Baseが白背景のままInformationPanelが置かれている

レイアウト

[WIP] モバイル

モバイルで自動的に切り替わるようにコンポーネントを改修予定です。

開閉ボタン

モバイルでは画面の表示領域が狭いため、開閉ボタンをアイコンボタンで表示します。

スクリーンショット(モバイル):InformationPanelの開閉ボタンの様子。アイコンボタンが使われている。

開閉ボタンがある場合、モバイルではアイコンボタンで表示する

余白

コンポーネント内部の余白はパディングの通りに16pxに変更します。

スクリーンショット(モバイル):InformationPanelの内側のパディングは16pxと示されている。

モバイルでのコンポーネント内の余白は16pxに変更する

前後の要素との余白についてはマージンを参照してください。

状態

デフォルト

利用者に伝えたい情報を表示するためのコンポーネントなため、デフォルトでは開閉ボタンを表示しません。

全文表示したままだと操作の妨げになるなど、利用者の使い勝手に影響する場合は開閉ボタンの表示を検討してください。その際、利用者のストレスを生みやすいため、開閉状態の保持を合せて検討してください。

Props

heading必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { sub?: ReactNode; text: ReactNode; }

パネルのタイトル

toggleable
false true

true のとき、開閉ボタンを表示する

onClickTrigger
(active: boolean) => void

開閉ボタン押下時に発火するコールバック関数

type
"error" "warning" "info" "success" "sync"
bold
false true
active
false true
ref
(instance: HTMLDivElement) => void RefObject<HTMLDivElement>