跳到正文
GitHub

导航

Accordion

就地展开的折叠行。

什么时候用它

标记是加号不是尖角:加号说“这会展开”,尖角说“下面还有”。

示例

default

说明

Radix 的根节点,原样再导出。FAQ 用 type="single" collapsible,设置项堆叠用 type="multiple";Radix 自己的可辨识联合类型会据此把 value 的类型定对。

属性

这个组件没有自己的属性。

组成部分

Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.

AccordionItem

一个展开行:一条细线分隔的触发器和它的面板。

标记是加号转成减号,不是尖角。尖角说“下面还有”,加号说“这个能展开”——在一叠行里,这个差别决定了读者预期的是跳转还是展开。

面板用 Radix 自己的 --radix-accordion-content-height 做动画,所以它能展开到真实高度,调用处不用去测量任何东西。

AccordionItem props
属性类型默认值说明
children必填ReactNode
title必填ReactNode这一行的摘要——读者点的就是它。叫 `title` 而不是沿用同名的那个 DOM 属性,那个是气泡提示。

同时接受 Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

再导出

Accordion = AccordionPrimitive.Root

Radix 的根节点,原样再导出。FAQ 用 type="single" collapsible,设置项堆叠用 type="multiple";Radix 自己的可辨识联合类型会据此把 value 的类型定对。

键盘操作

Accordion keyboard interactions
按键作用
Tab在各行之间移动。
EnterSpace展开或收起当前聚焦的那一行。