120k

手风琴

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

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 defaultExpandedKeys={["item-1"]}>
  <AccordionItem id="item-1">
    <AccordionTrigger>它具有可访问性吗?</AccordionTrigger>
    <AccordionContent>
      是的。它遵循 WAI-ARIA 设计模式。
    </AccordionContent>
  </AccordionItem>
</Accordion>

组成

使用以下组成来构建一个 Accordion

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

基础

一次显示一个项目的基础手风琴。第一个项目默认处于展开状态。

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,

多个

使用 allowsMultipleExpanded 属性允许多个项目同时展开。

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

import {
  Accordion,
  AccordionContent,

已禁用

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

import {
  Accordion,
  AccordionContent,

边框

border 添加到 Accordion,并将 border-b last:border-b-0 添加到 AccordionItem,即可为项目添加边框。

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

更多信息请参阅 React Aria 文档。