Modal
fandhe-frontend-wireframe-ui のモーダルダイアログ風プレースホルダーです。「中央に置かれたダイアログ枠(タイトル・本文・アクション行)」の配置イメージだけを示す非インタラクティブな部品です。API は modal(title, body, actions, size) の 4 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。body/actions は既存の wireframe-ui 部品(paragraph/text/button 等)の戻り値をそのまま渡す Node スロットです。
blocks.pm には対応部品がなく、fandhe-frontend-wireframe-ui 独自追加の部品です(詳細は docs/design/wireframe-ui-architecture.md §8)。参考として blocks.pm のリンクのみ掲載し、画像は掲載していません。
開閉状態・フォーカストラップ・Esc 操作などの対話は一切実装しない表示専用プレースホルダーです。実際に操作可能なダイアログが必要な場合は Dialog(Themes) / Dialog(Primitives) を検討してください。
Demo
既定(アクション 2 個)
アカウントを削除しますか?
この操作は取り消せません。関連するデータもすべて削除されます。
アクションなし
処理が完了しました
結果はダッシュボードから確認できます。
本文に text を差し込む例
確認
本当に実行しますか?
Sm
確認
内容を確認してください。
Lg
利用規約
本サービスの利用にあたっては、以下の利用規約に同意していただく必要があります。
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| title | &str | - | ダイアログのタイトル(常に太字で表示、見出し要素は使わない)。 |
| body | Node | - | 本文のスロット。paragraph/text 等の戻り値をそのまま渡す。 |
| actions | Vec<Node> | - | アクション行のスロット群。空のときはアクション行のパート要素自体を出力しない。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。パネルの最大幅にのみ効く。 |
原案差分メモ
- API は独自設計:
docs/design/wireframe-ui-architecture.md§8 の「blocks.pm 対応部品なし・独自追加」に従い、引数構成は既存部品(frame・question)と同じ「Nodeスロット +Size」の汎用変換規約から独立に設計しました。 actionsはVec<Node>(借用ではなく所有渡し): core のノード木 API・他の wireframe-ui 部品と同じく&[Node]ではなくVec<Node>を採用しています。&[Node]だと呼び出し側で.to_vec()の不要なclone()が必要になり.claude/rules/coding-rust.md「不要な clone() を避け、借用を優先」に反するためです。- 中央配置は
position: fixedにしない: docs ページ全体を覆うposition: fixed/absolute/z-indexは他のデモ枠のレイアウトを破壊するため使いません。ルート.fw-wire-modalは in-flow のブロック(display: grid; place-items: center;)とし、その内側のパネルを中央寄せしています。 <dialog>・role・aria-modal等は出力しない: 非対話制約(docs/design/wireframe-ui-architecture.md§7)により、<dialog>/role(dialog含む)/aria-*(aria-modal含む)/tabindex/style/<button>/<form>/<input>/<a href>は一切出力しません。- タイトルは見出し要素にしない:
h1〜h6ではなくdivで出力し、docs ページの目次・検索インデックスへ見出しとして混入しないようにしています。見た目は太字(font-weight: 600)で表現します。 - 閉じるボタン・開閉状態の表示軸は持たない:
Active/Disabled等の表示状態軸を追加せず、パネルの中身は常に「開いた状態」の 1 枚絵として表示します。閉じる「×」アイコンスロットの追加是非は本イシューのスコープ外とし、必要が見えた時点で別イシューとして検討します。 - 配色はグレースケール:
--fw-wire-ink/--fw-wire-ink-muted/--fw-wire-paper/--fw-wire-fill-subtle/--fw-wire-lineトークンのみを使い、ColorPaletteには依存しません。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 sizeはパネル最大幅にのみ効き、共有fw-wire-size-*は使わない: レビュー指摘(codex-review・Cursor Bugbot、イシュー #2645)を受けて是正しました。当初はルートへ共有fw-wire-size-*class を付与しており、--fw-wire-font-sizeがパネル・タイトルやbody/actionsスロットへ暗黙に継承され、「パネル最大幅にのみ効く」という公開契約と実装が食い違っていました。crate::frame(fw-wire-frame-padding-*、イシュー #2609)・crate::stack(fw-wire-stack-gap-*)が同種の問題を先に回避した前例に合わせ、Modal 専用の修飾 classfw-wire-modal-max-width-<段階>を新設して.fw-wire-modal-panelからfont-size: var(--fw-wire-font-size, ...)を削除しました。