折叠面板

查看源代码

用于扩展和折叠其他内容。

导入

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";
  • Collapsible: 折叠面板组件的包装器。
  • CollapsibleTrigger: 切换可折叠的按钮。
  • CollapsibleContent: 包含可折叠内容的组件。

演示

折叠面板默认只有必需的样式，你可以通过 Collapsible、CollapsibleTrigger 和 CollapsibleContent 的 className 自定义。

import { SpriteIcon } from "~/components/sprite-icon";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row justify-center"}>
      <Collapsible className={"border-bd-normal bg-bg-normal mx-auto w-80 rounded-md border"}>
        <CollapsibleTrigger
          className={"group flex w-full flex-row items-center justify-between p-3"}
        >
          <h6 className={"font-medium"}>Resolid React UI 是什么?</h6>

          <SpriteIcon
            className={"duration-(--dv) transition-transform group-aria-expanded:rotate-180"}
            size={"1.5em"}
            name={"angle-down"}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className={"border-bd-normal border-t p-3"}>
          Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS
          构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

举例

默认打开

import { SpriteIcon } from "~/components/sprite-icon";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row justify-center"}>
      <Collapsible
        defaultOpen
        className={"border-bd-normal bg-bg-normal mx-auto w-80 rounded-md border"}
      >
        <CollapsibleTrigger
          className={"group flex w-full flex-row items-center justify-between p-3"}
        >
          <h6 className={"font-medium"}>Resolid React UI 是什么?</h6>

          <SpriteIcon
            className={"duration-(--dv) transition-transform group-aria-expanded:rotate-180"}
            size={"1.5em"}
            name={"angle-down"}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className={"border-bd-normal border-t p-3"}>
          Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS
          构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

自定义

Resolid 项目拥有 7 个子项目
@resolid/config
@resolid/framework
import { SpriteIcon } from "~/components/sprite-icon";
import { Button, Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row justify-center"}>
      <Collapsible className={"bg-bg-normal mx-auto flex w-80 flex-col gap-2"}>
        <div className={"flex items-center justify-between"}>
          <h6 className={"font-bold"}>Resolid 项目拥有 7 个子项目</h6>
          <CollapsibleTrigger
            render={(props) => {
              return <Button size={"xs"} color={"neutral"} variant={"ghost"} iconOnly {...props} />;
            }}
            className={"group"}
          >
            <SpriteIcon
              className={"duration-(--dv) transition-transform group-aria-expanded:rotate-180"}
              size={"1.5em"}
              name={"angle-down"}
            />
          </CollapsibleTrigger>
        </div>
        <div className={"border-bd-normal rounded-md border px-3 py-2"}>@resolid/config</div>
        <div className={"border-bd-normal rounded-md border px-3 py-2"}>@resolid/framework</div>
        <CollapsibleContent className={"flex flex-col gap-2"}>
          <div className={"border-bd-normal rounded-md border px-3 py-2"}>@resolid/react-ui</div>
          <div className={"border-bd-normal rounded-md border px-3 py-2"}>
            @resolid/react-router-hono
          </div>
          <div className={"border-bd-normal rounded-md border px-3 py-2"}>@resolid/flex-routes</div>
          <div className={"border-bd-normal rounded-md border px-3 py-2"}>@resolid/utils</div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

禁用

import { SpriteIcon } from "~/components/sprite-icon";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row justify-center"}>
      <Collapsible
        disabled
        className={"border-bd-normal bg-bg-normal mx-auto w-80 rounded-md border"}
      >
        <CollapsibleTrigger
          className={"group flex w-full flex-row items-center justify-between p-3"}
        >
          <h6 className={"font-medium"}>Resolid React UI 是什么?</h6>

          <SpriteIcon
            className={"duration-(--dv) transition-transform group-aria-expanded:rotate-180"}
            size={"1.5em"}
            name={"angle-down"}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className={"border-bd-normal border-t p-3"}>
          Resolid React UI 是 React 的开源设计系统。使用 React 和 Tailwind CSS
          构建。它提供了一组即用型组件，用于构建具有一致外观的 Web 应用程序。
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

属性

属性open简介

受控打开状态

类型boolean默认值-必须false
属性defaultOpen简介

初始渲染时的默认打开状态

类型boolean默认值false必须false
属性onOpenChange简介

打开状态改变时调用

类型(open: boolean) => void默认值-必须false
属性disabled简介

是否禁用

类型boolean默认值false必须false
属性duration简介

动画持续时间

类型number默认值250必须false

建议更改此页面