コンポーネント / layout

layout · @awesome-ds/react

Cluster

折り返し可能な横並びレイアウト。

関連ルール: rule.foundations.semantic-tokens

状態マトリクス

通常必須

構造

  • 折り返すflexコンテナ
  • 横並びの子要素
  • トークン間隔

キーボード操作契約

追加のキー操作は持たず、折り返しても子要素のDOM順を保ちます。

スクリーンリーダー契約

役割を追加せず、折り返し後も子要素のDOM順を保ちます。

コンテンツ規則

  • 同格の操作やメタデータに使います。
  • 見た目の位置だけで順序を表しません。

公開API

プロパティ型必須説明
childrenReactNode—表示または読み上げ対象となる内容。
…nativeHTMLAttributes<HTMLDivElement>—対応するネイティブ要素の標準属性。

環境適応契約

RTL
論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
ハイコントラスト
背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
動きを減らす設定
状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Cluster/wrap-order

ライブ表示

ライブ表示

ABC

コピー可能な実装例

import { Cluster } from "@awesome-ds/react";

<Cluster>…</Cluster>