FlashMessage(非推奨)

FlashMessageは気づきにくいため、安易な使用はお勧めしません。NotificationBarDialogの使用を検討してください。

FlashMessageコンポーネントは、インターフェイス上に表示されるメッセージパネルです。
ユーザー操作やシステムの処理結果を、ユーザーに素早くフィードバックするために使います。

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

使用上の注意

他の操作に影響を及ぼさない便利な反面、注意を強く引くことはできません。ユーザーに大きな影響を及ぼす更新の通知をしたい場合は、Dialogコンポーネントを使うことを検討してください。

メッセージの書き方

  • 表示するメッセージが複数行になると可読性を下げるため、テキストは1行に収めます。
  • 1文のみの場合でも、文章には句点をつけます。
  • 単語のみ/体言止め(「など」で終わる場合も含む)は句点を省略します。

種類

補足

各挙動

表示・非表示

FlashMessageは8秒表示されると自動的に非表示となります。

FlashMessageの上にカーソルが置かれている間は、FlashMessageが消えることはありません。 カーソルがFlashMessageから離れると、FlashMessageのタイムアウトが再開されます。

表示位置

配置位置は、ウィンドウを基準とした「右上」「右下」「左上」「左下」の4パターンです。

外部サービス(ChatPlus、KARTEなど)の影響、機能ごとの画面レイアウト都合で表示位置を変えなければならない場合は、調整してください。

【閉じる】ボタン

「×(閉じる)」ボタンを押して手動でFlashMessageの表示を消すこともできます。

Props

visible必須
falsetrue

true のときに FlashMessage を表示する

type必須
"error""warning""info""success"

表示するアイコンのタイプ

text必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

メッセージの内容

animation
"none""bounce""fade"

アニメーションのタイプ

role
"alert""status"

コンポーネントに適用する role 属性

className
string

コンポーネントに適用するクラス名

onClose必須
() => void

閉じるボタンを押下、または表示してから8秒後に発火するコールバック関数

autoClose
falsetrue

FlashMessage が表示されてから一定時間後に自動で閉じるかどうか