クラスターClusterExperimental
タグ、ボタン、短い操作群を、折り返し可能な横並びとしてまとめるレイアウトプリミティブです。
プレビュー
状態とバリエーション
折り返しタグ
タグや短いバッジが増えた時に、行をまたいで自然に折り返します。
設計ReactドキュメントレスポンシブアクセシビリティSSOTプレビュー
右寄せ操作
フォームやフッターで、キャンセルと保存などの操作を右端にまとめます。
中央揃え
短い状態ラベルや補助情報を中央に揃えて表示します。
選択中レビュー中
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| gap | 0..8 の数値ステップ | "none" | "xs" | "sm" | "md" | "lg" | "xl" | 2 | 子要素同士の余白です。数値スケール（gap={6}）でも文字列エイリアス（gap="lg"）でも指定できます。size ではなくスペーシングトークンです。 |
| align | "start" | "center" | "end" | "baseline" | "center" | 折り返し行の交差軸方向の揃え方です。 |
| justify | "start" | "center" | "end" | "between" | "start" | 主軸方向の揃え方です。右寄せ操作群では end を使います。 |
| className | string | - | 追加の className です。 |
使い方
import { Badge, Cluster } from "@gunjo/ui";
const tags = ["設計", "React", "ドキュメント", "レスポンシブ", "アクセシビリティ"];
export function TagCluster() {
return (
<Cluster gap={2} align="center" justify="start">
{tags.map((tag) => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
</Cluster>
);
}