导航与展开@neumorphism-ui/accordion

Accordion

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

@neumorphism-ui/accordion

Registry JSON

预览

添加第一个组件时，也会将新拟态的 surface、shadow 和 radius token 接入项目 CSS。

安装

npx shadcn@latest add @neumorphism-ui/accordion

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>配送需要多长时间？</AccordionTrigger>
    <AccordionContent>
      订单会在 2–3 个工作日内发出。
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>可以退货吗？</AccordionTrigger>
    <AccordionContent>
      收货后 14 天内可以申请退货。
    </AccordionContent>
  </AccordionItem>
</Accordion>

API 参考

组件	属性	类型	默认值	说明
`Accordion`	`multiple`	`boolean`	`false`	允许同时展开多个项目。
`Accordion`	`value / defaultValue`	`string[]`	`—`	当前展开项目的受控值或非受控初始值。
`Accordion`	`onValueChange`	`(value) => void`	`—`	展开项目发生变化时调用。
`AccordionItem`	`value`必填	`string`	`—`	用于标识项目的唯一值。
`AccordionItem`	`disabled`	`boolean`	`false`	禁用该项目的触发器。
`AccordionContent`	`keepMounted`	`boolean`	`false`	关闭后仍将面板保留在 DOM 中。

预览

样式 token 也会一起安装吗？

安装后可以修改源码吗？

支持键盘操作吗？

安装

用法

Import

Example

API 参考

无障碍