Neumorphism UI
导航与展开@neumorphism-ui/collapsible

Collapsible

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

@neumorphism-ui/collapsible
Registry JSON

预览

安装

安装: collapsiblenpx shadcn@latest add @neumorphism-ui/collapsible

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

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

用法

Import

Collapsible import 代码
"use client";

import * as React from "react";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";

Example

Collapsible 用法代码
export default function Example() {
  const [expanded, setExpanded] = React.useState(false);
  return (<Collapsible open={expanded} onOpenChange={setExpanded}><CollapsibleTrigger>{"高级设置"}<span aria-hidden="true">{expanded ? "−" : "+"}</span></CollapsibleTrigger><CollapsibleContent><div>{"展开可选设置，不改变默认行为。"}</div></CollapsibleContent></Collapsible>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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