手风琴

¥Accordion

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

Yes. It adheres to the WAI-ARIA design pattern.

import * as React from "react";
import { Accordion } from "radix-ui";
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;

Features

Full keyboard navigation.

Supports horizontal/vertical orientation.

Supports Right to Left direction.

Can expand one or multiple items.

Can be controlled or uncontrolled.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-accordion

结构

¥Anatomy

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

¥Import all parts and piece them together.

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 Reference

根

¥Root

包含手风琴折叠面板的所有部分。

¥Contains all the parts of an accordion.

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"`

项目

¥Item

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

¥Contains all the parts of a collapsible section.

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

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

标题

¥Header

封装 Accordion.Trigger。使用 asChild 属性将其更新为适合你页面的标题级别。

¥Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

触发器

¥Trigger

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

¥Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

内容

¥Content

包含项目的可折叠内容。

¥Contains the collapsible content for an item.

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

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

CSS Variable	Description
`--radix-accordion-content-width`	The width of the content when it opens/closes
`--radix-accordion-content-height`	The height of the content when it opens/closes

示例

¥Examples

默认扩展

¥Expanded by default

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

¥Use the defaultValue prop to define the open item by default.

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

允许折叠所有项目

¥Allow collapsing all items

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

¥Use the collapsible prop to allow all items to close.

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

同时打开多个项目

¥Multiple items open at the same time

将 type 属性设置为 multiple，以便能够一次打开多个项目。

¥Set the type prop to multiple to enable opening multiple items at once.

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

打开时旋转的图标

¥Rotated icon when open

你可以添加额外的装饰元素，例如 V 形，并在项目打开时旋转它。

¥You can add extra decorative elements, such as chevrons, and rotate it when the item is open.

// 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>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);
}

水平方向

¥Horizontal orientation

使用 orientation 属性创建水平手风琴。

¥Use the orientation prop to create a horizontal accordion.

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

内容大小动画

¥Animating content size

使用 --radix-accordion-content-width 和/或 --radix-accordion-content-height CSS 变量来为内容打开/关闭时的大小设置动画：

¥Use the --radix-accordion-content-width and/or --radix-accordion-content-height CSS variables to animate the size of the content when it opens/closes:

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

/* 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;
	}
}

可访问性

¥Accessibility

遵循手风琴 WAI-ARIA 设计模式。

¥Adheres to the Accordion WAI-ARIA design pattern.

键盘交互

¥Keyboard Interactions

Key	Description
`Space`	When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.
`Enter`	When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`ArrowDown`	Moves focus to the next `Accordion.Trigger` when `orientation` is `vertical`.
`ArrowUp`	Moves focus to the previous `Accordion.Trigger` when `orientation` is `vertical`.
`ArrowRight`	Moves focus to the next `Accordion.Trigger` when `orientation` is `horizontal`.
`ArrowLeft`	Moves focus to the previous `Accordion.Trigger` when `orientation` is `horizontal`.
`Home`	When focus is on an `Accordion.Trigger`, moves focus to the first `Accordion.Trigger`.
`End`	When focus is on an `Accordion.Trigger`, moves focus to the last `Accordion.Trigger`.

Previous服务器端渲染

Next警告对话框

概览

指南

组件

实用工具

手风琴