コンポーネント / layout

layout · @awesome-ds/react

Container

読みやすい最大幅に内容を収めるコンテナ。

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

状態マトリクス

通常必須

構造

  • 中央寄せの幅制約
  • 内容スロット
  • レスポンシブ余白

キーボード操作契約

追加のキー操作は持たず、内部要素のセマンティックな操作を維持します。

スクリーンリーダー契約

役割を追加せず、ランドマークや見出しの意味は利用側の要素に委ねます。

コンテンツ規則

  • 主要な読み幅を一つに保ちます。
  • 全幅表示が必要な子要素は別の構造で扱います。

公開API

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

環境適応契約

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

検証ID

Container/max-width

ライブ表示

ライブ表示

読みやすい幅に制限したコンテナです。

コピー可能な実装例

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

<Container>…</Container>