---
title: Disclosure 折叠面板
description: 可折叠区块，包含标题、触发按钮与内容面板
links:
  rac: Disclosure
  source: disclosure/disclosure.tsx
  styles: disclosure.css
  storybook: Components/Navigation/Disclosure
  figma: true
---

## 用法

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

<ComponentPreview
  name="disclosure-basic"
  minHeight="440px"
/>

## 组件结构

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

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

## 示例

### 渲染函数

<ComponentPreview
  name="disclosure-render-function"
/>

## 自定义样式

### Tailwind CSS

<ComponentPreview name="disclosure-custom-styles" />

### 全局 CSS

可使用 `@layer components` 指令自定义 Disclosure 组件类。
[了解更多](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes)。

```css
@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](https://getbem.com/) 方法论，确保组件变体与状态可复用且易于自定义。

### CSS 类

Disclosure 组件使用以下 CSS 类（[查看源码样式](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/disclosure.css)）：

#### 基础类 [!toc]
- `.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 元素 |

### Render Props

使用 render prop 模式时，提供以下值：

| Prop | 类型 | 描述 |
|------|------|------|
| `isExpanded` | `boolean` | 当前展开状态 |
| `isDisabled` | `boolean` | 是否禁用 |

## 相关案例

<RelatedShowcases component="Disclosure" />

## 相关组件

<RelatedComponents component="disclosure" />
