手风琴

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

是的。它遵循 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;

特性

完整的键盘导航。

支持水平/垂直方向。

支持从右到左方向。

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

可以是受控或非受控的。

安装

从命令行安装组件。

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`	`布尔值`	`false`
`类型*`	`枚举`	无默认值
`值`	`字符串`	无默认值
`默认值`	`字符串`	无默认值
`onValueChange`	`函数`	无默认值
`值`	`字符串数组`	`[]`
`默认值`	`字符串数组`	`[]`
`onValueChange`	`函数`	无默认值
`可折叠`	`布尔值`	`false`
`禁用`	`布尔值`	`false`
`方向`	`枚举`	`"ltr"`
`方向`	`枚举`	`"vertical"`

数据属性	值
`[data-orientation]`	`"vertical" \|"horizontal"`

项目

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`禁用`	`布尔值`	`false`
`值*`	`字符串`	无默认值

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时出现
`[data-orientation]`	`"vertical" \|"horizontal"`

包装一个 Accordion.Trigger。使用 asChild 属性将其更新为页面中适当的标题级别。

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时出现
`[data-orientation]`	`"vertical" \|"horizontal"`

触发器

切换其关联项目的折叠状态。它应该嵌套在 Accordion.Header 中。

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时出现
`[data-orientation]`	`"vertical" \|"horizontal"`

内容

包含项目的可折叠内容。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`强制挂载`	`布尔值`	无默认值

数据属性	值
`[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` 上时，展开该部分。
`回车`	当焦点位于折叠部分的 `Accordion.Trigger` 上时，展开该部分。
`Tab`	将焦点移动到下一个可聚焦元素。
`Shift + Tab`	将焦点移动到上一个可聚焦元素。
`向下箭头`	当 `orientation` 为 `vertical` 时，将焦点移动到下一个 `Accordion.Trigger`。
`向上箭头`	当 `orientation` 为 `vertical` 时，将焦点移动到下一个 `Accordion.Trigger`。
`向右箭头`	当 `orientation` 为 `horizontal` 时，将焦点移动到上一个 `Accordion.Trigger`。
`向左箭头`	当 `orientation` 为 `horizontal` 时，将焦点移动到上一个 `Accordion.Trigger`。
`Home`	当焦点位于 `Accordion.Trigger` 上时，将焦点移动到第一个 `Accordion.Trigger`。
`End`	当焦点位于 `Accordion.Trigger` 上时，将焦点移动到最后一个 `Accordion.Trigger`。

上一页服务器端渲染

下一页警告对话框

在 GitHub 上编辑此页面。

概览

指南

组件

实用程序

手风琴

特性

安装

结构