Neumorphism UI

Accordion

需要浏览一组相关标题、按需展开详情时使用。只有一个独立区域需要展开时，可选择 Collapsible。

预览

组件设置问题

展开关于样式令牌、源码编辑和键盘操作的三个问题，初始打开令牌答案。

先安装一次共享基础样式，将新拟态的 surface、shadow 和 radius token 接入项目 CSS，供各组件使用。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/accordion

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

在每个 AccordionItem 内放置 AccordionTrigger 和 AccordionContent，并指定稳定且唯一的 value。需要同时保留多个答案时，设置 multiple。

"use client";

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion>
      <AccordionItem value="shipping">
        <AccordionTrigger>When will my order arrive?</AccordionTrigger>
        <AccordionContent>Orders ship in 2–3 business days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

API 参考

保留 Base UI Accordion 的状态管理与无障碍关联，并以 inset 表面呈现已展开的项目。支持 multiple 模式以及受控、非受控用法。

组件属性类型默认值说明
Accordionmultiplebooleanfalse允许同时展开多个项目。
Accordionvalue / defaultValuestring[]—当前展开项目的受控值或非受控初始值。
AccordiononValueChange(value) => void—展开项目发生变化时调用。
AccordionItemvalue必填string—用于标识项目的唯一值。
AccordionItemdisabledbooleanfalse禁用该项目的触发器。
AccordionContentkeepMountedbooleanfalse关闭后仍将面板保留在 DOM 中。

无障碍

  • 01

    Base UI 负责维护触发器与面板之间的 aria-expanded、aria-controls 关联。

  • 02

    使用 Tab 聚焦触发器，再用 Enter 或 Space 展开和收起项目。

  • 03

    AccordionTrigger 本身就是按钮，不要在标题中嵌套其他按钮。