水平スタックHStackExperimental
操作、ラベル、短い項目を横方向に並べ、余白・揃え・折り返しを制御します。
プレビュー
状態とバリエーション
ツールバー操作
短い操作ボタンを横方向に並べます。
両端揃え
ラベルと操作のように、左右へ分けたい行で使います。
プロジェクト状態
折り返し
タグや短い項目が横幅を超える時に折り返します。
下書き公開前確認準備完了公開済み保管済み
ベースライン揃え
サイズの違う数値と補足テキストを自然に揃えます。
128人が利用中
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| gap | 0..12 の数値ステップ | "none" | "xs" | "sm" | "md" | "lg" | "xl" | 2 | 子要素間の余白です。数値スケール（gap={6}）でも文字列エイリアス（gap="lg"）でも指定できます。size ではなくスペーシングトークンです。 |
| align | "start" | "center" | "end" | "baseline" | "stretch" | "center" | 縦方向の揃え方です。 |
| justify | "start" | "center" | "end" | "between" | "around" | "evenly" | "start" | 横方向の配置方法です。 |
| wrap | boolean | false | 横幅が足りない時に折り返すかどうかです。 |
| inline | boolean | false | inline-flex として描画します。 |
使い方
import { Button, HStack } from "@gunjo/ui";
export function ToolbarActions() {
return (
<HStack gap={2} align="center" wrap>
<Button size="sm">保存</Button>
<Button size="sm" variant="outline">プレビュー</Button>
<Button size="sm" variant="ghost">キャンセル</Button>
</HStack>
);
}