InformationPanel

ユーザーに伝えたい情報を他の要素より視覚的に目立たせるためのコンポーネントです。伝えたい情報の種類によってアイコンを切り替えて使います。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

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

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

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

Baseのなかに直接配置しない

InformationPanelのレイヤー順序3です。レイヤー順序が1Baseの中に直接配置しないでください。

削除ダイアログの注意事項など、Baseのなかで見出しと内容を目立たせたい場合は、BaseColumnを使用してください。見出し部分はHeading[type="blockTitle"]とResponseMessageで代替します。

do
Do
BaseのなかでBaseColumnとResponseMessageを用いて代替されている
dont
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>