zzzUI

Accordion

每次只展开一项的分段内容,各段以暗色细线分隔。标题倾斜,前方有一道斜切细条,展开时亮起强调色。

安装

terminal
# 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.

accordion-faq.tsx
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

属性类型默认值说明
multiplebooleanfalse允许多项同时展开。
defaultValue / valueany[]—展开的项,以各项的 value 指定。

另可传入 Base UI Accordion.Root 的全部属性。

AccordionItem, AccordionTrigger, AccordionContent

另可传入 Base UI Accordion.Item 的全部属性。