Accordion
每次只展开一项的分段内容,各段以暗色细线分隔。标题倾斜,前方有一道斜切细条,展开时亮起强调色。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/accordion示例
常见问题,每次展开一项
When the crate is signed for at the north gate. Half if it arrives late.
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger,} from "@/components/zero/accordion";const answers = [ [ "When am I paid?", "When the crate is signed for at the north gate. Half if it arrives late.", ], [ "Can I hand a job back?", "Until you pick the crate up. After that it is yours to deliver.", ], [ "What does Rush mean?", "The reward is higher and the window is shorter. Rush jobs cannot be handed back.", ],] as const;export default function AccordionFaq() { return ( <Accordion defaultValue={["When am I paid?"]} className="max-w-lg"> {answers.map(([question, answer]) => ( <AccordionItem key={question} value={question}> <AccordionTrigger>{question}</AccordionTrigger> <AccordionContent>{answer}</AccordionContent> </AccordionItem> ))} </Accordion> );}行为
展开一项时,其余各项随之收起;传入 multiple 可让多项同时保持展开。内容展开到自身高度,收起时更快;开启「减少动态效果」时直接显示,不播放动画。
用方向键在各标题间切换焦点,按 Enter 或空格键展开当前项。每个标题都是置于标题元素(heading)内的按钮。
属性
Accordion
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| multiple | boolean | false | 允许多项同时展开。 |
| defaultValue / value | any[] | — | 展开的项,以各项的 value 指定。 |
另可传入 Base UI Accordion.Root 的全部属性。
AccordionItem, AccordionTrigger, AccordionContent
另可传入 Base UI Accordion.Item 的全部属性。