Accordion

安装

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/accordion.json
yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/accordion.json
pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/accordion.json
bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/accordion.json

参考

示例

import {Accordion,AccordionContent,AccordionItem,AccordionTrigger,} from "@/registry/ssp/ui/accordion"export default function Example() {return (  <Accordion type='single' collapsible className='w-full'>    <AccordionItem value='item-1'>      <AccordionTrigger>Is it accessible?</AccordionTrigger>      <AccordionContent>        Yes. It adheres to the WAI-ARIA design pattern.      </AccordionContent>    </AccordionItem>    <AccordionItem value='item-2'>      <AccordionTrigger>Is it styled?</AccordionTrigger>      <AccordionContent>        Yes. It comes with default styles that matches the other        components&apos; aesthetic.      </AccordionContent>    </AccordionItem>    <AccordionItem value='item-3'>      <AccordionTrigger>Is it animated?</AccordionTrigger>      <AccordionContent>        Yes. It's animated by default, but you can disable it if you prefer.      </AccordionContent>    </AccordionItem>  </Accordion>)}