Lumi UI

折叠面板

一个由按钮控制展开和收起的面板。

DocsAPI Reference

安装

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

基本用法

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible>
  <CollapsibleTrigger>我可以在我的项目中使用它吗？</CollapsibleTrigger>
  <CollapsiblePanel>
    可以。可免费用于个人和商业项目，无需署名。
  </CollapsiblePanel>
</Collapsible>

组件结构

<Collapsible>
  <CollapsibleTrigger/>
  <CollapsiblePanel/>
</Collapsible>

实用示例

配合 Motion 使用

1
2
3
4

文件树

npm
package.json
README.mdDocs

API 参考

组件描述
Collapsible组合折叠面板的所有部分。渲染 <div> 元素。
CollapsibleTrigger用于打开和关闭折叠面板的按钮。渲染 <button> 元素。
CollapsiblePanel包含折叠内容的面板。渲染 <div> 元素。

CollapsiblePanel

属性类型默认值描述
animation"css" | "none""css"控制折叠面板的默认动画方式。

配合 Motion 使用

Base UI 会通过 render 属性将其 className（包括过渡样式）传递到你的自定义组件上。这会导致 CSS 动画和 JS 动画同时运行，从而产生卡顿。