106k
New

手风琴

PreviousNext

一组垂直堆叠的交互式标题，每个标题都可以展开显示一段内容。

Radix UIBase UI
Radix UI

We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.

import {
  Accordion,
  AccordionContent,

安装

pnpm dlx shadcn@latest add accordion

用法

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>它是否无障碍？</AccordionTrigger>
    <AccordionContent>
      是的。它遵循 WAI-ARIA 设计规范。
    </AccordionContent>
  </AccordionItem>
</Accordion>

示例

基础

一个基础手风琴，每次只显示一个项目。默认展开第一个项目。

Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.

import {
  Accordion,
  AccordionContent,

多项

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

Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.

import {
  Accordion,
  AccordionContent,

禁用

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

import {
  Accordion,
  AccordionContent,

边框

给 Accordion 添加 border，并给 AccordionItem 添加 border-b last:border-b-0，为项目添加边框。

We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.

import {
  Accordion,
  AccordionContent,

卡片

将 Accordion 包裹在 Card 组件中。

Subscription & Billing
Common questions about your account, plans, payments and cancellations.

We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.

import {
  Accordion,
  AccordionContent,

API 参考

更多信息请参见 Radix UI 文档。