Skip to content
fandhe-frontendcore v0.4.3
GitHub

Toast

fandhe-frontend-wireframe-ui の通知トースト風プレースホルダーです。任意のアイコン + 短い本文 + 見た目だけの閉じる「×」で「一時的な通知カード」の配置イメージだけを示す非インタラクティブな部品です。API は toast(message, icon, dismissible, size) の 4 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。

toast は blocks.pm に対応する部品を持たない、wireframe-ui 独自追加の部品です。層全体の参照元は blocks.pm ですが、本部品自体には blocks.pm 上の対応物がないためスクリーンショットは掲載していません。

role="status"・aria-live・<button> のいずれも実装せず、画面隅への固定配置(position: fixed/absolute)も行わない表示専用プレースホルダーです。実際に操作可能な通知が必要な場合は Toast(Themes) / Toast(Primitives) を検討してください。

Demo

既定(message のみ)

設定を保存しました

icon + dismissible

保存しました

icon のみ

新しい通知があります

dismissible のみ

この操作は取り消せません

Sm

処理が完了しました

Lg

アップロードが完了しました

引数表

引数型既定値説明
message&str-必須。常に出力する短い本文。
iconOption<Node>None省略可能なアイコンスロット。icon::bell・icon::check 等の戻り値をそのまま渡す。None のときはアイコンのパート要素自体を出力しない。
dismissibleboolfalsetrue のときだけ末尾に閉じるパート(icon::x 固定)を出力する。
sizeSizeSize::Mdサイズ段階(xs〜xl)。閉じるグリフのサイズにも使う。

原案差分メモ

  • 独自追加部品: toast は docs/design/wireframe-ui-architecture.md §8 が挙げる、blocks.pm に対応部品がない wireframe-ui 独自追加の 14 部品のひとつです。転写元がないため、引数構成は同文書 §6 の汎用変換規約から独立に設計しました。
  • 引数名は text ではなく message: イシュー本文が想定する引数名は text ですが、fandhe_frontend_core::text(テキストノードを作る関数)と同じ値名前空間で衝突するため message に改めました。意味は同じです。
  • アイコンは Option<Node> スロットで受ける: イシュー本文が想定する見た目(アイコン + 短文 + close)に対し、info/success 専用のグリフはありません。専用グリフを新設すると icon モジュールの件数表記等へ影響が波及するため、link(イシュー #2618)・file-drop(イシュー #2633)と同じ Option<Node> アイコンスロット規約(同文書 §11.4)を採用しました。呼び出し側は icon::bell・icon::check 等、任意の既存アイコンを渡せます。
  • 閉じるグリフは icon::x 固定(instance swap にしない): select の末尾指示子・ratings の icon::star と同じく固定パートとして扱い、dismissible: bool の 1 引数だけで有無を切り替えます(tag の remove: Option<Node> のような差し替え可能スロットにはしていません)。
  • 表示状態軸・重要度バリアントを持たない: Bold/Primary/Active/ Disabled はいずれも使わず、info/success/error 等の重要度表現も本部品の対象外です。最小構成にとどめ、重要度表現が必要な場合は上記の Themes / Primitives の Toast を案内します。toast ルート・子要素には data-* を一切付与しません(アイコンスロット・閉じるグリフが持つ data-icon は例外としてそのまま透過します)。
  • <button>・role・aria-live は出力しない: 非対話制約(同文書 §7)により、閉じるパートは <button> にせず、role="status"・aria-live・<output>・tabindex・style・on* は一切出力しません。
  • 固定配置は付けない: position: fixed/absolute による画面隅への固定配置は利用者のレイアウトの責務とし、docs のデモ枠の中に収まる in-flow のカードとして描きます。「浮いている感じ」はトークン参照のハードシャドウ(box-shadow: 0 0.25em 0 var(--fw-wire-line-subtle))で表現します。
  • スクリーンショット非掲載: docs/design/reference-screenshots/ への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本部品には blocks.pm 上の対応物自体がないため、上記の外部リンクのみで代替します。
  • 配色はグレースケール: --fw-wire-ink/--fw-wire-ink-muted トークンのみを使い、ColorPalette には依存しません。