106k
New

折叠面板

PreviousNext

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

Radix UIBase 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 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,

多项展开

使用 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 参考

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