FlashMessage(非推奨)

FlashMessageは非推奨です。ユーザーに操作の結果を伝えるUIについては、フィードバックを参照してください。

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

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

メッセージの書き方

  • 表示するメッセージが複数行になると可読性を下げるため、テキストは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

メッセージの内容

role
"alert""status"

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

onClose必須
() => void

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

autoClose
falsetrue

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

animation
"none""bounce"