レイアウトの概要
余白、比率、並び、スクロール、リサイズ、作業面など、コンテンツを配置する土台を作るコンポーネント群です。情報そのものより、配置と可変領域の責務を扱います。
コンポーネント一覧
各コンポーネントの詳細ページへ移動して、プレビュー、コード、プロパティを確認できます。
アスペクト比
AspectRatio画像、動画、iframe などのメディア枠を、指定した縦横比で保つレイアウトプリミティブです。
アセットインスペクター
AssetInspectorPanelアセットのプレビュー、タグ、メタデータ、操作をまとめて確認・編集するインスペクターパネルです。
クラスター
Clusterタグ、ボタン、短い操作群を、折り返し可能な横並びとしてまとめるレイアウトプリミティブです。
開閉パネルトグル
CollapsiblePanelToggle境界線上に配置して、左右上下の折りたたみパネルを開閉するトグルボタンです。
コンテナ
Containerページやセクションの横幅、左右余白、中央寄せを一貫して制御するレイアウトプリミティブです。
デバイスフレーム
DeviceFrameデスクトップ、タブレット、モバイルの表示サイズを切り替えられる擬似ブラウザフレームです。
グリッド
Grid列数、間隔、最小幅を指定して、カードやメディアを整列する CSS grid ラッパーです。
水平スタック
HStack操作、ラベル、短い項目を横方向に並べ、余白・揃え・折り返しを制御します。
インスペクター
InspectorPanel選択中の対象に紐づくプロパティを、セクションとフィールドで閲覧・編集するパネルです。
マーキーフレーム
MarqueeFrameパターンや画面を、擬似ブラウザと表示サイズ切り替えの中で確認するフレームです。
リサイズ可能
Resizableキーボード操作にも対応した、リサイズ可能な分割パネルレイアウトです。
スクロール領域
ScrollArea表示領域を意図的に制限し、縦横スクロールを一貫したスタイルで扱います。
空間キャンバス
SpatialCanvasパネルやノードを配置できる、ドット背景とグリッド間隔を持つキャンバス面です。
垂直スタック
VStackフォーム、カード、説明ブロックなどを縦方向に積み、余白・揃え・高さ内の配置を制御します。
補足情報
一覧でコンポーネントを選んだあとに確認する、カテゴリ全体の責務、共通ルール、使い分けです。
このカテゴリの責務
情報を直接表現するのではなく、余白、比率、並び、スクロール、可変領域の土台を安定させます。
このページの使い方
まずカテゴリの責務を確認し、迷いやすい使い分けから該当コンポーネントへ移動します。
パターンで確認する場面
デバイス幅、作業面、パネル、サイドバー、フォームなどを組み合わせた時に、固定値に頼らず破綻しないか確認します。
レイアウト系の共通ルール
カテゴリ内で共通して守るべき判断基準です。
固定高さや固定幅で見た目だけを合わせず、実際の用途に合う可変領域を設計します。
フォームやパネルの中身は、GunjoUI の Input や関連コンポーネントを compose して使います。
迷いやすい使い分け
似ているコンポーネントを選ぶ時の入口です。
単純な横並びは HStack/Cluster、縦方向のまとまりは VStack、面全体の幅制御は Container を使います。
作業面は SpatialCanvas、デバイス確認は DeviceFrame、サイズ変更が必要な領域は Resizable を使います。
最初に確認するページ
並び、幅、比率、スクロール、作業面のどれを決めたいかで入口を選びます。
避ける使い方
レイアウトは後から中身が変わる前提で、固定値ではなく意図した制約で安定させます。
docs プレビューを成立させるためだけに固定高さを足す。
フォーム項目や入力欄を one-off styling で作り、Input 系コンポーネントを使わない。
スクロール領域とページ全体のスクロール責務を混ぜる。