# 手风琴

一组垂直堆叠的交互式标题，每个标题都会显示一个相关的内容部分。

## Features

- 完整的键盘导航。

- 支持横向/纵向方向。

- 支持从右到左的方向。

- 可以展开一个或多个项目。

- 可以是受控或非受控的。

## [Anatomy](#anatomy)

导入所有部分并将其组合在一起。

```jsx
import { Accordion } from "radix-ui";

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

      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
);
```

## [API 参考](#api-参考)

### [根元素](#根元素)

包含手风琴的所有部分。

| Prop            | Type       | Default          |
| --------------- | ---------- | ---------------- |
| `asChild`       | `boolean`  | `false`          |
| `type*`         | `enum`     | No default value |
| `value`         | `string`   | No default value |
| `defaultValue`  | `string`   | No default value |
| `onValueChange` | `function` | No default value |
| `value`         | `string[]` | `[]`             |
| `defaultValue`  | `string[]` | `[]`             |
| `onValueChange` | `function` | No default value |
| `collapsible`   | `boolean`  | `false`          |
| `disabled`      | `boolean`  | `false`          |
| `dir`           | `enum`     | `"ltr"`          |
| `orientation`   | `enum`     | `"vertical"`     |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [项目](#项目)

包含可折叠部分的所有部分。

| Prop       | Type      | Default          |
| ---------- | --------- | ---------------- |
| `asChild`  | `boolean` | `false`          |
| `disabled` | `boolean` | `false`          |
| `value*`   | `string`  | No default value |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | 禁用时存在                   |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [头部](#头部)

包裹一个 `Accordion.Trigger`。 使用 `asChild` 属性将它更新为适合您页面的标题级别。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | 禁用时存在                   |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [触发器](#触发器)

切换其关联项目的折叠状态。 应嵌套在 `Accordion.Header` 内部。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | 禁用时存在                   |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [内容](#内容)

包含项目的可折叠内容。

| Prop         | Type      | Default          |
| ------------ | --------- | ---------------- |
| `asChild`    | `boolean` | `false`          |
| `forceMount` | `boolean` | No default value |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"open" \| "closed"`         |
| `[data-disabled]`    | 禁用时存在                   |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

| CSS Variable                       | Description           |
| ---------------------------------- | --------------------- |
| `--radix-accordion-content-width`  | 内容打开/关闭时的宽度 |
| `--radix-accordion-content-height` | 内容打开/关闭时的高度 |

## [示例](#示例)

### [默认展开](#默认展开)

使用 `defaultValue` 属性定义默认打开的项目。

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

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [允许折叠所有项目](#允许折叠所有项目)

使用 `collapsible` 属性允许所有项目关闭。

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

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [同时打开多个项目](#同时打开多个项目)

将 `type` 属性设置为 `multiple` 以启用同时打开多个项目。

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

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

### [打开时旋转图标](#打开时旋转图标)

您可以添加额外的装饰元素，例如尖头，当项目打开时旋转它。

```jsx
// index.jsx

import { Accordion } from "radix-ui";

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>触发文本</span>

          <ChevronDownIcon className="AccordionChevron" aria-hidden />
        </Accordion.Trigger>
      </Accordion.Header>

      <Accordion.Content>…</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);
```

```css
/* styles.css */

.AccordionChevron {
  transition: transform 300ms;
}

.AccordionTrigger[data-state="open"] > .AccordionChevron {
  transform: rotate(180deg);
}
```

### [横向方向](#横向方向)

使用 `orientation` 属性创建一个横向手风琴。

```jsx
<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 变量来动画内容打开/关闭时的大小：

```jsx
// index.jsx

import { Accordion } from "radix-ui";

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>
);
```

```css
/* 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 设计模式](https://www.w3.org/WAI/ARIA/apg/patterns/accordion)。

### [键盘交互](#键盘交互)

| Key           | Description                                                                   |
| ------------- | ----------------------------------------------------------------------------- |
| `Space`       | 当焦点位于折叠部分的 `Accordion.Trigger` 上时，展开该部分。                   |
| `Enter`       | 当焦点位于折叠部分的 `Accordion.Trigger` 上时，展开该部分。                   |
| `Tab`         | 将焦点移到下一个可聚焦元素。                                                  |
| `Shift + Tab` | 将焦点移到上一个可聚焦元素。                                                  |
| `ArrowDown`   | 当 `orientation` 为 `vertical` 时，将焦点移动到下一个 `Accordion.Trigger`。   |
| `ArrowUp`     | 当 `orientation` 为 `vertical` 时，将焦点移动到上一个 `Accordion.Trigger`。   |
| `ArrowRight`  | 当 `orientation` 为 `horizontal` 时，将焦点移动到下一个 `Accordion.Trigger`。 |
| `ArrowLeft`   | 当 `orientation` 为 `horizontal` 时，将焦点移动到上一个 `Accordion.Trigger`。 |
| `Home`        | 当焦点位于 `Accordion.Trigger` 上时，将焦点移到第一个 `Accordion.Trigger`。   |
| `End`         | 当焦点位于 `Accordion.Trigger` 上时，将焦点移到最后一个 `Accordion.Trigger`。 |

<!--$-->

<!--/$-->