折叠面板

查看源代码

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

演示

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

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

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

用法

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

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

<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

特点

举例

默认打开

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

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

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

自定义

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 (
    <Collapsible className={"flex w-80 flex-col gap-2 bg-bg-normal"}>
      <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={"transition-transform duration-(--dv) group-aria-expanded:rotate-180"}
            size={"1.5em"}
            name={"angle-down"}
          />
        </CollapsibleTrigger>
      </div>
      <div className={"rounded-md border border-bd-normal px-3 py-2"}>@resolid/config</div>
      <div className={"rounded-md border border-bd-normal px-3 py-2"}>@resolid/framework</div>
      <CollapsibleContent className={"flex flex-col gap-2"}>
        <div className={"rounded-md border border-bd-normal px-3 py-2"}>@resolid/react-ui</div>
        <div className={"rounded-md border border-bd-normal px-3 py-2"}>
          @resolid/react-router-hono
        </div>
        <div className={"rounded-md border border-bd-normal px-3 py-2"}>@resolid/flex-routes</div>
        <div className={"rounded-md border border-bd-normal px-3 py-2"}>@resolid/utils</div>
      </CollapsibleContent>
    </Collapsible>
  );
}

禁用

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

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

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

属性

属性
duration

动画持续时间

类型number默认值250必须false
属性
open

受控打开状态

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

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

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

打开状态改变时调用

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

是否禁用

类型boolean默认值false必须false

建议更改此页面