FlashMessage
- SmartHR UI v21.4.5
- Storybook
- ソースコード（GitHub）
FlashMessageコンポーネントは、インターフェイス上に表示されるメッセージパネルです。
ユーザー操作やシステムの処理結果を、ユーザーに素早くフィードバックするために使います。
SmartHR UIではFlashMessageです。
メッセージの書き方
- 表示するメッセージが複数行になると可読性を下げるため、テキストは1行に収めます。
- 1文のみの場合でも、文章には句点をつけます。
- 単語のみ/体言止め（「など」で終わる場合も含む）は句点を省略します。
FlashMessageを使う際の注意
他の操作に影響を及ぼさない便利な反面、アテンションとして強くはありません。ユーザーに大きな影響を及ぼす更新の通知をしたい場合は、Dialogコンポーネントを使うことを検討してください。
種類
補足
各挙動
表示・非表示
FlashMessageは8秒表示されると自動的に非表示となります。
FlashMessageの上にカーソルが置かれている間は、FlashMessageが消えることはありません。 カーソルがFlashMessageから離れると、FlashMessageのタイムアウトが再開されます。
表示位置
配置位置は、ウィンドウを基準とした「右上」「右下」「左上」「左下」の4パターンです。
外部サービス（ChatPlus、KARTEなど）の影響、機能ごとの画面レイアウト都合で表示位置を変えなければならない場合は、調整してください。
【閉じる】ボタン
「×（閉じる）」ボタンを押して手動でFlashMessageの表示を消すこともできます。
Props
| Name | Required | Type | Description |
|---|---|---|---|
| visible | true | false,
true | true のときに FlashMessage を表示する |
| type | true | "error",
"warning",
"info",
"success" | 表示するアイコンのタイプ |
| text | true | string,
number,
false,
true,
{},
ReactElement<any, string | JSXElementConstructor<any>>,
Iterable<ReactNode>,
ReactPortal | メッセージの内容 |
| animation | - | "none",
"bounce",
"fade" | アニメーションのタイプ |
| role | - | "alert",
"status" | コンポーネントに適用する role 属性 |
| className | - | string | コンポーネントに適用するクラス名 |
| onClose | true | () => void | 閉じるボタンを押下、または表示してから8秒後に発火するコールバック関数 |
| autoClose | - | false,
true | FlashMessage が表示されてから一定時間後に自動で閉じるかどうか |