Tinyrack

Accordion

関連コンテンツを段階的に表示するキーボード対応セクションです。Tab と Shift+Tab でトリガー間を移動し、Enter または Space でフォーカス中のセクションを切り替えます。

主なプロパティ

プロパティ値既定値
選択value で制御、または defaultValue で非制御[]
展開Root の multiple単一
利用可否Root または Item の disabled操作可能
ライフサイクルアンマウント、keepMounted、hiddenUntilFoundアンマウント

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/accordion.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRAccordion } from '@tinyrack/ui/components/accordion';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

プレイグラウンドでは、Root と Item の無効状態、単一または複数の展開、3 種類のパネルライフサイクルを操作できます。制御された value はプレビューの操作に追従します。リセットすると「概要」だけが開き、閉じたパネルをアンマウントする初期状態に戻ります。

使用方法

制御付き複数展開 パーマリンク

どちらのセクションも開閉でき、下の結果に現在の値が反映されます。

例

単一・複数展開、無効状態、コンテンツ保持 パーマリンク

API

構造

<TRAccordion.Root>
  <TRAccordion.Item value="network">
    <TRAccordion.Header>
      <TRAccordion.Trigger>ネットワーク</TRAccordion.Trigger>
    </TRAccordion.Header>
    <TRAccordion.Panel>オンライン</TRAccordion.Panel>
  </TRAccordion.Item>
</TRAccordion.Root>

完全な構造は Root、Item、Header、Trigger、Panel です。各パートは TRAccordion.Part 形式と名前付きの TRAccordionPart エクスポート形式の両方で利用できます。対応する TRAccordionPartProps 型と TRAccordionPartState 型も提供されます。

Root のプロパティ

プロパティ型既定値用途
valueValue[]-開いている項目の値を制御します。
defaultValueValue[][]非制御状態で最初に開く項目を指定します。
onValueChange(value, details) => void-次の値と Base UI のイベント詳細を通知します。
multiplebooleanfalse複数の項目を同時に開いたままにします。
disabledbooleanfalseすべての項目の操作を無効にします。
keepMountedbooleanfalse閉じたパネルを hidden のまま DOM に保持します。
hiddenUntilFoundbooleanfalse閉じたパネルを hidden="until-found" で検索可能に保ち、keepMounted より優先されます。
renderReactElement | function<div>動作と ref のマージを保ったままルート要素を置き換えます。

Item には、制御付きまたは初期展開のための安定した value が必要です。disabled と onOpenChange も受け取ります。Header は既定で h3 をレンダリングするため、周囲の見出しレベルに合わせて render を使用してください。Trigger はボタン、Panel は関連付けられたリージョンをレンダリングします。すべてのパートは className、style、ネイティブ属性、イベントハンドラー、ref、Base UI の状態に基づく render コントラクトを保持します。

Enter または Space はフォーカスを移動せずにトリガーを切り替えます。Tab と Shift+Tab は文書内の通常の順序に従います。無効なトリガーも aria-disabled="true" でフォーカスできますが、切り替わりません。非推奨の矢印キーロービングフォーカス用プロパティは、フォーカス動作に影響しません。

外観

トークンフォールバック用途
--tr-accordion-background--tinyrack-surfaceRoot の背景。
--tr-accordion-radius--tinyrack-radius-md外側の角丸。
--tr-accordion-content-backgroundtransparent開いた Panel の背景。
--tr-accordion-disabled-background--tinyrack-surface-muted無効な Item の背景。
--tr-accordion-disabled-color--tinyrack-text-muted無効な Item の文字色。
--tr-collapsible-duration--tinyrack-duration-normalCollapsible から継承するパネルのトランジション時間。

@tinyrack/ui/components/accordion.css を明示的にインポートしてください。基盤トークンがライト・ダークの配色、境界線、フォーカスインジケーター、タイポグラフィ、間隔、視差効果を減らす設定に対応します。