手风琴

import {
  Accordion,
  AccordionContent,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add accordion
Copy

用法

🌐 Usage

Copyimport {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

Copy<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

示例

🌐 Examples

基础

🌐 Basic

一个基本的手风琴，每次显示一个项目。第一个项目默认是打开的。

🌐 A basic accordion that shows one item at a time. The first item is open by default.

import {
  Accordion,
  AccordionContent,

多个

🌐 Multiple

使用 type="multiple" 允许同时打开多个项目。

🌐 Use type="multiple" to allow multiple items to be open at the same time.

import {
  Accordion,
  AccordionContent,

已禁用

🌐 Disabled

在 AccordionItem 上使用 disabled 属性来禁用单个项目。

🌐 Use the disabled prop on AccordionItem to disable individual items.

import {
  Accordion,
  AccordionContent,

边界

🌐 Borders

将 border 添加到 Accordion，将 border-b last:border-b-0 添加到 AccordionItem 以给项目添加边框。

🌐 Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

import {
  Accordion,
  AccordionContent,

卡片

🌐 Card

将 Accordion 封装在 Card 组件中。

🌐 Wrap the Accordion in a Card component.

import {
  Accordion,
  AccordionContent,

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import {

API参考

🌐 API Reference

有关更多信息，请参阅 Radix UI 文档。

🌐 See the Radix UI documentation for more information.