Frame
fandhe-frontend-wireframe-ui の配置コンテナ部品です。padding と境界線だけを持つ矩形のコンテナで、画面設計図上で領域をまとめる用途を想定しています。API は frame(children, padding, bordered) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
blocks.pm に同名の部品はなく、本部品は fandhe-frontend-wireframe-ui 独自追加の 1 つです(docs/design/wireframe-ui-architecture.md §8「49 部品一覧」参照)。そのためスクリーンショットは掲載していません。
Themes には類似の Card がありますが、Card は header/body/footer の anatomy を持つのに対し、Frame は境界線と padding のみの単純な配置コンテナです。
Demo
既定(Md・bordered)
配置メモ
フレーム内の段落。
bordered=false
境界線なしのフレーム。
入れ子(外 Lg bordered → 内 Sm bordered ×2)
内側 1
内側 2
padding 比較(Xs / Xl)
Xs padding
Xl padding
子なしの空フレーム
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| children | Vec<Node> | - | 子ノード群。空でも空要素(<div>)が出力される。 |
| padding | Size | - | padding のサイズ段階(xs〜xl)。境界線幅・角丸には影響しない。 |
| bordered | bool | - | true のとき境界線を表示する。false でも境界線幅は透明で確保される。 |
原案差分メモ
Vec<Node>採用: イシュー本文の想定引数「子ノード群」は&[Node](借用)も選択肢でしたが、core のノード木 API・pre-styled-ui 全部品・wireframe-uiicon::glyphがいずれもVec<Node>所有渡しであり、&[Node]だと子ツリー全体のclone()が毎回発生するため.claude/rules/coding-rust.md「不要な clone() を避け、借用を優先」との整合を優先しVec<Node>を採用しました。- 非 bordered でも透明な境界線幅を確保:
bordered=falseのときもborder-color: transparentとして境界線幅自体は確保しています。borderedの切り替えでレイアウト幅がずれない決定的な表示にするためです。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本部品は blocks.pm 原案が存在しないためそもそも参照画像がありません。 - 非インタラクティブ:
role/aria-*/tabindexは一切付与せず、button/a[href]のような対話要素も出力しません(設計文書 §5/§7)。 - padding は Frame 専用 class で表現(コードレビュー指摘、PR #2679 で是正): 当初は
Size::class()が返す共有fw-wire-size-*class をルートへ直接付与し、--fw-wire-control-sizeをcalc()で参照して padding を決めていましたが、この共有 class は--fw-wire-font-sizeも同時に定義し子孫へ継承されるため、独自の size class を再宣言しない子部品の文字サイズまで Frame の padding 引数で意図せず変化させてしまう問題がありました。Stack が同種の問題をfw-wire-stack-gap-*専用 class で先に回避した設計に倣い、Frame もfw-wire-frame-padding-<段階>(.fw-wire-frame.fw-wire-frame-padding-xs〜-xl、0.75rem〜1.5rem)をFRAME_CSS内に 5 段明示する専用 class へ変更し、共有変数を子孫へ漏らさないようにしています。size.rs自体は変更していません。