ユーティリティ

アコーディオン

インタラクティブな見出しを垂直に積み重ねたセットで、それぞれに関連付けられたコンテンツセクションが表示されます。

はい。WAI-ARIAデザインパターンに準拠しています。

import React from 'react';
import * as Accordion from '@radix-ui/react-accordion';
import classNames from 'classnames';
import { ChevronDownIcon } from '@radix-ui/react-icons';
import './styles.css';

const AccordionDemo = () => (
  <Accordion.Root className="AccordionRoot" type="single" defaultValue="item-1" collapsible>
    <Accordion.Item className="AccordionItem" value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
    </Accordion.Item>

    <Accordion.Item className="AccordionItem" value="item-2">
      <AccordionTrigger>Is it unstyled?</AccordionTrigger>
      <AccordionContent>
        Yes. It's unstyled by default, giving you freedom over the look and feel.
      </AccordionContent>
    </Accordion.Item>

    <Accordion.Item className="AccordionItem" value="item-3">
      <AccordionTrigger>Can it be animated?</AccordionTrigger>
      <Accordion.Content className="AccordionContent">
        <div className="AccordionContentText">
          Yes! You can animate the Accordion with CSS or JavaScript.
        </div>
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

const AccordionTrigger = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
  <Accordion.Header className="AccordionHeader">
    <Accordion.Trigger
      className={classNames('AccordionTrigger', className)}
      {...props}
      ref={forwardedRef}
    >
      {children}
      <ChevronDownIcon className="AccordionChevron" aria-hidden />
    </Accordion.Trigger>
  </Accordion.Header>
));

const AccordionContent = React.forwardRef(({ children, className, ...props }, forwardedRef) => (
  <Accordion.Content
    className={classNames('AccordionContent', className)}
    {...props}
    ref={forwardedRef}
  >
    <div className="AccordionContentText">{children}</div>
  </Accordion.Content>
));

export default AccordionDemo;

機能

完全なキーボードナビゲーション。

水平/垂直方向をサポートします。

右から左への方向をサポートします。

1つまたは複数のアイテムを展開できます。

制御することも、制御解除することもできます。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-accordion

構造

すべてのパーツをインポートして、それらをまとめて組み立てます。

import * as Accordion from '@radix-ui/react-accordion';

export default () => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>
      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
);

APIリファレンス

ルート

アコーディオンのすべてのパーツが含まれています。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`type*`	`enum`	デフォルト値なし
`value`	`string`	デフォルト値なし
`defaultValue`	`string`	デフォルト値なし
`onValueChange`	`function`	デフォルト値なし
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	デフォルト値なし
`collapsible`	`boolean`	`false`
`disabled`	`boolean`	`false`
`dir`	`enum`	`"ltr"`
`orientation`	`enum`	`"vertical"`

データ属性	値
`[data-orientation]`	`"vertical" \|"horizontal"`

アイテム

折りたたみ可能なセクションのすべてのパーツが含まれています。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`value*`	`string`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効になっている場合に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

Accordion.Triggerをラップします。asChildプロパティを使用して、ページに適した見出しレベルに更新します。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効になっている場合に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

トリガー

関連付けられたアイテムの折りたたみ状態を切り替えます。Accordion.Header内にネストする必要があります。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効になっている場合に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

コンテンツ

アイテムの折りたたみ可能なコンテンツが含まれています。

プロパティ	タイプ	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	無効になっている場合に存在
`[data-orientation]`	`"vertical" \|"horizontal"`

CSS変数	説明
`--radix-accordion-content-width`	開閉時のコンテンツの幅
`--radix-accordion-content-height`	開閉時のコンテンツの高さ

例

デフォルトで展開

defaultValueプロパティを使用して、デフォルトで開くアイテムを定義します。

<Accordion.Root type="single" defaultValue="item-2">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

すべてのアイテムの折りたたみ 허용

collapsibleプロパティを使用して、すべてのアイテムを閉じることができるようにします。

<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

複数のアイテムを同時に開く

type プロパティを multiple に設定すると、複数の項目を同時に開くことができます。

<Accordion.Root type="multiple">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

開いたときに回転するアイコン

シェブロンなどの装飾要素を追加し、項目が開いたときに回転させることができます。

// index.jsx
import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDownIcon } from '@radix-ui/react-icons';
import './styles.css';

export default () => (
  <Accordion.Root type="single">
    <Accordion.Item value="item-1">
      <Accordion.Header>
        <Accordion.Trigger className="AccordionTrigger">
          <span>Trigger text</span>
          <ChevronDownIcon className="AccordionChevron" aria-hidden />
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

/* styles.css */
.AccordionChevron {
  transition: transform 300ms;
}
.AccordionTrigger[data-state='open'] > .AccordionChevron {
  transform: rotate(180deg);
}

横方向の配置

orientation プロパティを使用して、横方向のアコーディオンを作成します。

<Accordion.Root orientation="horizontal">
  <Accordion.Item value="item-1">…</Accordion.Item>
  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>

コンテンツサイズのアニメーション

--radix-accordion-content-width および/または --radix-accordion-content-height CSS変数を使用して、開閉時のコンテンツのサイズをアニメーション化します。

// index.jsx
import * as Accordion from '@radix-ui/react-accordion';
import './styles.css';

export default () => (
  <Accordion.Root type="single">
    <Accordion.Item value="item-1">
      <Accordion.Header>…</Accordion.Header>
      <Accordion.Content className="AccordionContent">…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

/* styles.css */
.AccordionContent {
  overflow: hidden;
}
.AccordionContent[data-state='open'] {
  animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state='closed'] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

アクセシビリティ

アコーディオン WAI-ARIA デザインパターンに準拠しています。

キーボード操作

キー	説明
`スペース`	折りたたまれたセクションの `Accordion.Trigger` にフォーカスがある場合、セクションを展開します。
`Enter`	折りたたまれたセクションの `Accordion.Trigger` にフォーカスがある場合、セクションを展開します。
`Tab`	フォーカスを次のフォーカス可能な要素に移動します。
`Shift + Tab`	フォーカスを前のフォーカス可能な要素に移動します。
`下矢印`	`orientation` が `vertical` の場合、フォーカスを次の `Accordion.Trigger` に移動します。
`上矢印`	`orientation` が `vertical` の場合、フォーカスを前の `Accordion.Trigger` に移動します。
`右矢印`	`orientation` が `vertical` の場合、フォーカスを次の `Accordion.Trigger` に移動します。 `orientation` が `horizontal` の場合、フォーカスを次の `Accordion.Trigger` に移動します。
`左矢印`	`orientation` が `vertical` の場合、フォーカスを前の `Accordion.Trigger` に移動します。 `orientation` が `horizontal` の場合、フォーカスを次の `Accordion.Trigger` に移動します。
`Home`	`Accordion.Trigger` にフォーカスがある場合、フォーカスを最初の `Accordion.Trigger` に移動します。
`End`	`Accordion.Trigger` にフォーカスがある場合、フォーカスを最後の `Accordion.Trigger` に移動します。

前へサーバーサイドレンダリング

次へアラートダイアログ

GitHub でこのページを編集する。

概要

ガイド

コンポーネント

ユーティリティ

アコーディオン

アクセシブルですか？

スタイルは適用されていませんか？

アニメーション化できますか？

機能