110k
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,

RTL

要在 shadcn/ui 中启用从右至左（RTL）支持，请参阅 RTL 配置指南。

انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.

"use client"

import * as React from "react"

API 参考

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