InformationPanel
ユーザーに伝えたい情報を他の要素より視覚的に目立たせるためのコンポーネントです。伝えたい情報の種類によってアイコンを切り替えて使います。
使用上の注意
短い一文で説明できるものに使用しない
見出しと内容を必ずセットにして使用してください。短い一文で説明できる場合は、ResponseMessageやNotificationBar[base="base"]が適しています。
詳しい使い分けはフィードバック - 同期的な処理が完了したときを参照してください。
Baseのなかに直接配置しない
InformationPanelのレイヤー順序は3
です。レイヤー順序が1
のBaseの中に直接配置しないでください。
削除ダイアログの注意事項など、Baseのなかで見出しと内容を目立たせたい場合は、BaseColumnを使用してください。見出し部分はHeading[type="blockTitle"]とResponseMessageで代替します。
Do
BaseのなかでBaseColumnとResponseMessageを用いて代替されているDon't
Baseのなかに直接InformationPanelが置かれている具体的な代替コードは以下を参照してください。
状態
デフォルト
利用者に伝えたい情報を表示するためのコンポーネントなため、デフォルトでは開閉ボタンを表示しません。
全文表示したままだと操作の妨げになるなど、利用者の使い勝手に影響する場合は開閉ボタンの表示を検討してください。その際、利用者のストレスを生みやすいため、開閉状態の保持を合せて検討してください。
Props
title必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
パネルのタイトル
titleTag非推奨
"h1""h2""h3""h4""h5""h6"
@deprecated titleTagは非推奨です
type
"error""warning""info""success""sync"
表示する情報のタイプ
togglable
falsetrue
true
のとき、開閉ボタンを表示する
active
falsetrue
パネルの開閉の状態
onClickTrigger
(active: boolean) => void
開閉ボタン押下時に発火するコールバック関数
decorators
DecoratorsType<"openButtonLabel" | "closeButtonLabel">
コンポーネント内の文言を変更するための関数を設定
ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>