# Collapse

折叠面板

# Usage

## Basic

```tsx
import React from 'react'
import { Collapse, CollapsePanel } from 'react-icecream'

export default () => {
  return (
    <Collapse>
      <CollapsePanel title="title1" value={1}>
        panel1
      </CollapsePanel>
      <CollapsePanel title="title2" value={2}>
        panel2
      </CollapsePanel>
    </Collapse>
  )
}
```

## 受控的折叠面板

```tsx
import React, { useState } from 'react'
import { Collapse, CollapsePanel } from 'react-icecream'

export default () => {
  const [value, setValue] = useState([1])
  return (
    <Collapse value={value} onChange={setValue}>
      <CollapsePanel title="title1" value={1}>
        panel1
      </CollapsePanel>
      <CollapsePanel title="title2" value={2}>
        panel2
      </CollapsePanel>
    </Collapse>
  )
}
```

## 自定义面板头部

```tsx
import React from 'react'
import { Collapse, CollapsePanel, Button, Select, SelectOption } from 'react-icecream'
import { CloseIcon, AddIcon } from 'react-icecream/icons'

import './demo.less'

export default () => {
  return (
    <Collapse defaultValue={[1, 2]}>
      <CollapsePanel
        title={
          <>
            <span className="custom-title-1">标题1</span>
            <div onClick={e => e.stopPropagation()}>
              <Select
                style={{ marginLeft: 16, width: 200, background: 'white' }} size="small"
                placeholder="请选择类型"
              >
                <SelectOption key="single" value="single">单选</SelectOption>
                <SelectOption key="multiple" value="multiple">多选</SelectOption>
              </Select>
            </div>
          </>
        }
        value={1}
        extra={
          <>
            <AddIcon className="operation-icon" />
            <CloseIcon className="operation-icon" />
          </>
        }
      >
        panel1
      </CollapsePanel>
      <CollapsePanel
        title={<span className="custom-title-2">title2</span>}
        value={2}
        extra={
          <>
            <Button type="link">编辑</Button>
            <Button type="link" className="button-gap">设置</Button>
          </>
        }
      >
        panel2
      </CollapsePanel>
    </Collapse>
  )
}
```

## 单面板模式（手风琴模式）

```tsx
import React from 'react'
import { Collapse, CollapsePanel } from 'react-icecream'

export default () => {
  return (
    <Collapse single>
      <CollapsePanel title="title1" value={1}>
        panel1
      </CollapsePanel>
      <CollapsePanel title="title2" value={2}>
        panel2
      </CollapsePanel>
    </Collapse>
  )
}
```

## 自定义面板

自定义各个面板的背景颜色、边框、边距等。

<code src="./demos/custom-panel.tsx"></code>

<API></API>