🌐 Nodejs.cn
新建

手风琴

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,

安装

🌐 Installation

pnpm dlx shadcn@latest add accordion

用法

🌐 Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

示例

🌐 Examples

基础

🌐 Basic

一个基本的手风琴，每次显示一个项目。第一个项目默认是打开的。

🌐 A basic accordion that shows one item at a time. The first item is open by default.

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

使用 multiple 属性以允许同时打开多个项目。

🌐 Use the multiple prop to allow multiple items to be open at the same time.

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

import {
  Accordion,
  AccordionContent,

已禁用

🌐 Disabled

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

🌐 Use the disabled prop on AccordionItem to disable individual items.

import {
  Accordion,
  AccordionContent,

边界

🌐 Borders

将 border 添加到 Accordion，将 border-b last:border-b-0 添加到 AccordionItem 以给项目添加边框。

🌐 Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

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,

卡片

🌐 Card

将 Accordion 封装在 Card 组件中。

🌐 Wrap the Accordion in a Card component.

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 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

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

"use client"

import * as React from "react"

API参考

🌐 API Reference

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

🌐 See the Base UI documentation for more information.