Lumi UI

手风琴

一组带标题的可折叠面板。

DocsAPI Reference

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus?

安装

pnpm dlx shadcn@latest add @lumi-ui/accordion

基本用法

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionSummary,
} from "@/components/ui/accordion";
export function AccordionDemo() {
  return (
    <Accordion defaultValue={["item-1"]} className="w-full max-w-md">
      <AccordionItem value="item-1">
        <AccordionSummary>什么是 Lumi UI？</AccordionSummary>
        <AccordionPanel>
          Lumi UI 是一个开源的组件库，专为使用 React 构建美观且无障碍的用户界面而设计。
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary>组件可以自定义吗？</AccordionSummary>
        <AccordionPanel>
          当然可以。组件基于 Tailwind CSS 和 CVA 构建，便于样式调整和扩展，能轻松匹配你的品牌风格。
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

组件结构

<Accordion>
  <AccordionItem>
    <AccordionSummary/>
    <AccordionPanel/>
  </AccordionItem>
</Accordion>

实用示例

带图标的自定义触发器

不带图标的自定义触发器

默认展开面板

要让某个手风琴项默认展开，给 AccordionItem 设置一个唯一的 value，然后把这个值放入数组传给 Accordion 组件的 defaultValue 属性。

如果想默认展开多个面板，请确保 multiple 属性设置为 true，并在 defaultValue 数组中包含每个面板的 value。

多项展开

通过 multiple 属性，让手风琴支持同时展开多个面板。

禁用面板

向 AccordionItem 传入 disabled 属性即可禁用某个面板。

配合 Motion 使用

Base UI 会通过 render 属性把自身的 className（包括过渡样式）传递给你的自定义组件。这会导致 CSS 动画和 JS 动画同时运行，从而出现卡顿。

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.

API 参考

组件描述
Accordion组合手风琴的所有部分。渲染一个 <div> 元素。
AccordionItem将一个手风琴标题与对应的面板组合在一起。渲染一个 <div> 元素。
AccordionHeader标记对应面板的标题。渲染一个 <h3> 元素。
AccordionTrigger用于展开和折叠对应面板的按钮。渲染一个 <button> 元素。
AccordionPanel可折叠的面板，承载手风琴项的内容。渲染一个 <div> 元素。
AccordionSummary包装 AccordionHeader 和 AccordionTrigger 的样式化容器。

AccordionPanel

属性类型默认值描述
animation"css" | "none""css"控制手风琴面板的默认动画。