Neumorphism UI

Collapsible

用于展开或收起一个独立的补充信息或高级设置区域。

预览

展开详细设置

保持周围内容不变，切换受控的详细设置区域。

正在加载预览。

安装

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

npx shadcn@latest add @neumorphism-ui/collapsible

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

Registry JSON

用法

在 Collapsible 内放置 CollapsibleTrigger 和 CollapsibleContent。应用需要跟踪展开状态时使用 open 和 onOpenChange。

"use client";

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";

export default function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
      <CollapsibleContent><div>Optional project settings go here.</div></CollapsibleContent>
    </Collapsible>
  );
}

API 参考

展开或折叠一组可选设置的容器。 触发按钮名称应说明内容。检查 Enter 和 Space 展开操作。

组件属性类型默认值说明
Collapsibleopen / defaultOpenboolean—设置受控状态或初始状态。
CollapsibleTriggerdisabledboolean—禁用用户操作。
CollapsibleContentkeepMountedboolean—关闭时仍将面板保留在 DOM 中。

无障碍

  • 01

    触发按钮名称应说明内容。检查 Enter 和 Space 展开操作。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。