コンポーネント / layout

layout · @awesome-ds/react

Stack

トークン化した間隔で縦に並べるレイアウト。

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

状態マトリクス

通常必須

構造

  • 縦方向flexコンテナ
  • 順序付きの子要素
  • トークン間隔

キーボード操作契約

追加のキー操作は持たず、子要素のDOM順を保ちます。

スクリーンリーダー契約

役割を追加せず、子要素のDOM順をそのまま読み上げ順として保ちます。

コンテンツ規則

  • 一次元の縦方向リズムに使います。
  • 意味のあるDOM順を保ちます。

公開API

プロパティ型必須説明
gap1 | 2 | 3 | 4 | 6 | 8—トークン化した要素間隔。
childrenReactNode—表示または読み上げ対象となる内容。
…nativeHTMLAttributes<HTMLDivElement>—対応するネイティブ要素の標準属性。

環境適応契約

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

検証ID

Stack/token-gap

ライブ表示

ライブ表示

コピー可能な実装例

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

<Stack gap={4}>…</Stack>