Stack
fandhe-frontend-wireframe-ui の純粋なレイアウトコンテナ部品です。子要素を縦または横に等間隔で並べる用途に使います。API は stack(children, orientation, gap) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
blocks.pm には対応する部品がなく、本部品は fandhe-frontend-wireframe-ui 独自追加の部品です(スクリーンショットの掲載元がないため、参照画像は掲載していません)。
Primitives・Themes には同名の "Stack" 部品はありません(本部品は fandhe-frontend-wireframe-ui 固有です)。
Demo
Horizontal(既定・gap Md)
A
B
C
Vertical(gap Md)
A
B
C
gap Xs(Horizontal)
A
B
gap Xl(Horizontal)
A
B
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| children | Vec<Node> | - | 並べる子ノード列。渡した順序どおりに描画される(空でもルート div は出力される)。 |
| orientation | Orientation | Orientation::Horizontal | 並べる方向。Horizontal は行方向、Vertical は列方向。 |
| gap | Size | Size::Md | 子要素間の間隔(xs〜xl の 5 段)。 |
原案差分メモ
- 方向の型は再利用: 新型を導入せず
Orientation(Horizontal既定 /Vertical)を再利用しました。docs/design/wireframe-ui-architecture.md§10.1 がfw-wire-horizontal/fw-wire-verticalを割り当て済みで、他部品(divider 等)からも横断利用される型です。 - children は所有渡し:
Vec<Node>を受け取ります。core のdiv/el_ownedと同じ設計で、&[Node]のような借用渡しにはしていません。 - gap は Size 5 段を明示・専用 class で表現:
Sizeのスコープ付きカスタムプロパティ(--fw-wire-font-size/--fw-wire-control-size)には gap 用の値がないため、.fw-wire-stack.fw-wire-stack-gap-<段階>の 5 セレクタへgapを直接明示しています(0.25rem〜2rem)。gap はcrate::size::cssが生成する共有fw-wire-size-*class ではなく、Stack 専用のfw-wire-stack-gap-*class で表現します(コードレビュー指摘、イシュー #2610)。共有fw-wire-size-*は--fw-wire-font-size/--fw-wire-control-sizeを同時に定義するためルートへ付与すると子孫へ意図せず継承されてしまい、独自に size class を再宣言しない任意の子部品の文字・コントロールサイズまで暗黙に変更してしまいます。レイアウトコンテナの責務を gap に限定するため、Stack は共有 class を使わず専用 class で子孫への副作用を遮断しています。 - 非インタラクティブ:
role/aria-*/tabindex/style/data-*は一切付与せず、対話要素も出力しません(設計文書 §5/§7)。