折叠面板

查看源代码

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

演示

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>
  );
}

属性

属性
open

受控打开状态

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

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

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

打开状态改变时调用

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

动画持续时间

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

是否禁用

类型boolean默认值false必须false

建议更改此页面