导航
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 做动画,所以它能展开到真实高度,调用处不用去测量任何东西。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| title必填 | ReactNode | 这一行的摘要——读者点的就是它。叫 `title` 而不是沿用同名的那个 DOM 属性,那个是气泡提示。 |
同时接受 Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
再导出
Accordion = AccordionPrimitive.RootRadix 的根节点,原样再导出。FAQ 用 type="single" collapsible,设置项堆叠用 type="multiple";Radix 自己的可辨识联合类型会据此把 value 的类型定对。
键盘操作
| 按键 | 作用 |
|---|---|
| Tab | 在各行之间移动。 |
| EnterSpace | 展开或收起当前聚焦的那一行。 |