用法

import { Disclosure } from '@heroui/react';

使用手机相机扫描此二维码，即可预览 HeroUI Native 组件。

设备需已安装 Expo。

组件结构

import { Disclosure } from '@heroui/react';

export default () => (
  <Disclosure>
    <Disclosure.Heading>
      <Disclosure.Trigger>
        <Disclosure.Indicator />
      </Disclosure.Trigger>
    </Disclosure.Heading>
    <Disclosure.Content/>
  </Disclosure>
)

示例

渲染函数

使用手机相机扫描此二维码，即可预览 HeroUI Native 组件。

设备需已安装 Expo。

"use client";

import {QrCode} from "@gravity-ui/icons";
import {Button, Disclosure} from "@heroui/react";
import {Icon} from "@iconify/react"

自定义样式

Tailwind CSS

"use client";

import {ShoppingBag} from "@gravity-ui/icons";
import {Button, Disclosure} from "@heroui/react";
import {useState} from "react";

全局 CSS

可使用 @layer components 指令自定义 Disclosure 组件类。了解更多。

@layer components {
  .disclosure {
    @apply relative;
  }

  .disclosure__trigger {
    @apply cursor-pointer;
  }

  .disclosure__indicator {
    @apply transition-transform duration-300;
  }

  .disclosure__content {
    @apply overflow-hidden transition-all;
  }
}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Disclosure 组件使用以下 CSS 类（查看源码样式）：

基础类

.disclosure - 基础容器样式
.disclosure__heading - 标题包裹层
.disclosure__trigger - 触发按钮样式
.disclosure__indicator - 箭头指示器样式
.disclosure__content - 带动画的内容容器

交互状态

组件同时支持 CSS 伪类与 data 属性：

Expanded：指示器上 [data-expanded="true"] 用于旋转
Focus：触发器上 :focus-visible 或 [data-focus-visible="true"]
Disabled：触发器上 :disabled 或 [aria-disabled="true"]
Hidden：内容上 [aria-hidden="false"] 控制可见性

API 参考

Disclosure

Prop	类型	默认值	描述
`isExpanded`	`boolean`	`false`	控制展开状态
`onExpandedChange`	`(isExpanded: boolean) => void`	-	展开状态变化时的回调
`isDisabled`	`boolean`	`false`	是否禁用
`children`	`ReactNode \| RenderFunction`	-	要渲染的内容
`className`	`string`	-	附加 CSS 类
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, DisclosureRenderProps>`	-	使用自定义 render 函数覆盖默认 DOM 元素

DisclosureTrigger

Prop	类型	默认值	描述
`children`	`ReactNode \| RenderFunction`	-	触发器内容
`className`	`string`	-	附加 CSS 类

DisclosureContent

Prop	类型	默认值	描述
`children`	`ReactNode`	-	显示/隐藏的内容
`className`	`string`	-	附加 CSS 类
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, DisclosureContentRenderProps>`	-	使用自定义 render 函数覆盖默认 DOM 元素