---
name: Collapse 折叠面板
route: /guide/collapse
menu: other
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Collapse } from "shineDev";
import code from "./demo";
import "./demo/index.scss";

# Collapse 折叠面板

## 概述

可以折叠 / 展开的内容区域，对复杂区域进行分组和隐藏，保持页面的整洁。

## 代码示例

#### 基础示例

基础的弹出面板样式。

<Example
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 亮色显示

让弹出面板标题以亮色显示。

<Example
  display={<JsxParser {...code.light} />}
  code={{code:code.light.jsx}}
  components={code.light.components}
/>

#### 暗色显示

让弹出面板标题以暗色显示。

<Example
  display={<JsxParser {...code.solid} />}
  code={{code:code.solid.jsx}}
  components={code.solid.components}
/>

#### 带图标的弹出面板

设置标题带图标的弹出面板。

<Example
  display={<JsxParser {...code.icon} />}
  code={{code:code.icon.jsx}}
  components={code.icon.components}
/>

## 配置参数

#### Collapse
<PropsTable of={Collapse} />

#### Panel
<PropsTable of={Collapse.Panel} />