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

RTL

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

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

"use client"

import {

API 参考

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