# 可折叠组件

一个可展开/折叠面板的交互组件。

## Features

- 完全键盘导航。

- 可以为受控或非受控。

## [架构](#架构)

导入组件并将各个部分组合在一起。

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

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger />

    <Collapsible.Content />
  </Collapsible.Root>
);
```

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

### [Root](#root)

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

| Prop           | Type       | Default          |
| -------------- | ---------- | ---------------- |
| `asChild`      | `boolean`  | `false`          |
| `defaultOpen`  | `boolean`  | No default value |
| `open`         | `boolean`  | No default value |
| `onOpenChange` | `function` | No default value |
| `disabled`     | `boolean`  | No default value |

| Data attribute    | Values               |
| ----------------- | -------------------- |
| `[data-state]`    | `"open" \| "closed"` |
| `[data-disabled]` | 在禁用时显示         |

### [Trigger](#trigger)

用于切换可折叠组件的按钮。

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

| Data attribute    | Values               |
| ----------------- | -------------------- |
| `[data-state]`    | `"open" \| "closed"` |
| `[data-disabled]` | 在禁用时显示         |

### [Content](#content)

包含可折叠内容的组件。

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

| Data attribute    | Values               |
| ----------------- | -------------------- |
| `[data-state]`    | `"open" \| "closed"` |
| `[data-disabled]` | 在禁用时显示         |

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

## [示例](#示例)

### [动画内容大小](#动画内容大小)

使用 `--radix-collapsible-content-width` 和/或 `--radix-collapsible-content-height` CSS 变量在内容展开/关闭时对其大小进行动画处理。以下是演示：

```jsx
// index.jsx

import { Collapsible } from "radix-ui";

import "./styles.css";

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger>…</Collapsible.Trigger>

    <Collapsible.Content className="CollapsibleContent">…</Collapsible.Content>
  </Collapsible.Root>
);
```

```css
/* styles.css */

.CollapsibleContent {
  overflow: hidden;
}

.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}

.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }

  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }

  to {
    height: 0;
  }
}
```

## [可访问性](#可访问性)

遵循 [Disclosure WAI-ARIA 设计模式](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure)。

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

| Key     | Description           |
| ------- | --------------------- |
| `Space` | 打开/关闭可折叠组件。 |
| `Enter` | 打开/关闭可折叠组件。 |

<!--$-->

<!--/$-->