# MCollapse 折叠

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/collapse/freepass)
- 平台：移动端
- 维护者：王斌
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MCollapse]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react'
import { MCollapse, Switch } from '@weapp/ui'

export default class BasicDemo extends React.Component<{}> {
  state = {
    activeKey: '1',
    bg: true,
    accordion: false,
    iconPosition: 'right',
  }

  handleChange = (activeKey: any) => {
    this.setState({
      activeKey,
    })
  }

  handleBgChange = (bg: boolean) => {
    this.setState({ bg })
  }

  handleAccordionChange = (accordion: boolean) => {
    this.setState({ accordion, activeKey: '1' })
  }

  handlePositionChange = (v: boolean) => {
    this.setState({ iconPosition: v ? 'right' : 'left' })
  }

  render() {
    const { activeKey } = this.state

    return (
      <div>
        <div style={{ margin: '20px 0' }}>
          <h3>基础使用</h3>
        </div>
        <div>
          <MCollapse
           
            activeKey={activeKey}
            onChange={this.handleChange}
            type='group'
          >
            <MCollapse.Panel
             
              title='标题1'
              key='1'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              <div
                style={{
                  borderBottom: '1px solid #ebebeb8a',
                  paddingBottom: '15px',
                }}
              >
                折叠面板里的样式
              </div>
              <div style={{ paddingTop: '15px' }}>
                内容比较多时候的样式内容比较多时候的样式内容比较多时候的样式
              </div>
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题2'
              key='2'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题二内容标题二内容标题二内容标题二内容标题二内容标题二内容
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题3'
              key='3'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题三内容标题三内容标题三内容标题三内容标题三内容标题三内容
            </MCollapse.Panel>
          </MCollapse>
        </div>
      </div>
    )
  }
}
```

### 禁用某项

Pannel设置disabled属性

```jsx
import React from 'react'
import { MCollapse, Switch } from '@weapp/ui'

export default class BasicDemo extends React.Component<{}> {
  state = {
    activeKey: '1',
    bg: true,
    accordion: false,
    iconPosition: 'right',
  }

  handleChange = (activeKey: any) => {
    this.setState({
      activeKey,
    })
  }

  render() {
    const { activeKey } = this.state

    return (
      <div>
        <div style={{ margin: '20px 0' }}>
          <h3>基础使用</h3>
        </div>
        <div>
          <MCollapse
           
            activeKey={activeKey}
            onChange={this.handleChange}
            type='group'
          >
            <MCollapse.Panel
             
              title='标题1'
              key='1'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              <div
                style={{
                  borderBottom: '1px solid #ebebeb8a',
                  paddingBottom: '15px',
                }}
              >
                折叠面板里的样式
              </div>
              <div style={{ paddingTop: '15px' }}>
                内容比较多时候的样式内容比较多时候的样式内容比较多时候的样式
              </div>
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题2'
              key='2'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题二内容标题二内容标题二内容标题二内容标题二内容标题二内容
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='禁用(disable)'
              key='3'
              disabled
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题三内容标题三内容标题三内容标题三内容标题三内容标题三内容
            </MCollapse.Panel>
          </MCollapse>
        </div>
      </div>
    )
  }
}
```

### 手风琴效果

手风琴,设置accordion属性切换为手风琴效果，一次只能有一个 active 的面板

```jsx
import React from 'react'
import { MCollapse, Switch } from '@weapp/ui'

export default class BasicDemo extends React.Component<{}> {
  state = {
    activeKey: '1',
    bg: true,
    accordion: true,
    iconPosition: 'right',
  }

  handleChange = (activeKey: any) => {
    this.setState({
      activeKey,
    })
  }

  handleBgChange = (bg: boolean) => {
    this.setState({ bg })
  }

  handleAccordionChange = (accordion: boolean) => {
    this.setState({ accordion, activeKey: '1' })
  }

  handlePositionChange = (v: boolean) => {
    this.setState({ iconPosition: v ? 'right' : 'left' })
  }

  render() {
    const { activeKey, bg, accordion } = this.state
    const titleBg = !bg ? 'default' : 'none'

    return (
      <div>
        <div style={{ margin: '20px 0' }}>
          <h3>基础使用</h3>
          <span style={{ marginLeft: 20 }}>
            <Switch
             
              value={this.state.accordion}
              onChange={this.handleAccordionChange}
            />
            <span>&nbsp;&nbsp;手风琴</span>
          </span>
        </div>
        <div>
          <MCollapse
           
            accordion={accordion}
            panelTitleBackground={titleBg}
            activeKey={activeKey}
            onChange={this.handleChange}
            type='group'
          >
            111
            <MCollapse.Panel
             
              title='标题1'
              key='1'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              <div
                style={{
                  borderBottom: '1px solid #ebebeb8a',
                  paddingBottom: '15px',
                }}
              >
                折叠面板里的样式
              </div>
              <div style={{ paddingTop: '15px' }}>
                内容比较多时候的样式内容比较多时候的样式内容比较多时候的样式
              </div>
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题2'
              key='2'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题二内容标题二内容标题二内容标题二内容标题二内容标题二内容
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题3'
              key='3'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题二内容标题二内容标题二内容标题二内容标题二内容标题二内容
            </MCollapse.Panel>
          </MCollapse>
        </div>
      </div>
    )
  }
}
```

### 向下折叠

```jsx
import React from 'react'
import { MCollapse, Switch } from '@weapp/ui'

export default class BasicDemo extends React.Component<{}> {
  state = {
    activeKey: '1',
    bg: true,
    accordion: false,
    iconPosition: 'right',
  }

  handleChange = (activeKey: any) => {
    this.setState({
      activeKey,
    })
  }

  handleBgChange = (bg: boolean) => {
    this.setState({ bg })
  }

  handleAccordionChange = (accordion: boolean) => {
    this.setState({ accordion, activeKey: '1' })
  }

  handlePositionChange = (v: boolean) => {
    this.setState({ iconPosition: v ? 'right' : 'left' })
  }

  render() {
    const { activeKey } = this.state

    return (
      <div>
        <div style={{ margin: '20px 0' }}>
          <h3>基础使用</h3>
        </div>
        <div>
          <MCollapse
           
            activeKey={activeKey}
            onChange={this.handleChange}
            type='group'
            direction='down'
          >
            <MCollapse.Panel
             
              title='标题1'
              key='1'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              <div
                style={{
                  borderBottom: '1px solid #ebebeb8a',
                  paddingBottom: '15px',
                }}
              >
                折叠面板里的样式
              </div>
              <div style={{ paddingTop: '15px' }}>
                内容比较多时候的样式内容比较多时候的样式内容比较多时候的样式
              </div>
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题2'
              key='2'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题二内容标题二内容标题二内容标题二内容标题二内容标题二内容
            </MCollapse.Panel>
            <MCollapse.Panel
             
              title='标题3'
              key='3'
              iconPosition={this.state.iconPosition as 'left' | 'right'}
            >
              标题三内容标题三内容标题三内容标题三内容标题三内容标题三内容
            </MCollapse.Panel>
          </MCollapse>
        </div>
      </div>
    )
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| activeKey | 当前打开的面板 id | string \| string[] | 否 | `1` |
| onChange | 切换面板的回调函数 | (value: string \| string[], key?: string \| string[], active?: string) => any; | 否 | - |
| customIconRender | 自定义渲染箭头图标 | (props: ICollapsePanelProps) => React.ReactNode | 否 | - |
| accordion | 手风琴模式，一次只能有一个 active 的面板 | boolean | 否 | false |
| panelTitleBackground | panel标题的默认class,默认为`ui-m-collapse-panel__title--bg-default`,设置none时为为`ui-m-collapse-panel__title--bg-none` | string | 否 | 'default' |
| className | 复写类名 | string | 否 | - |
| bordered | 默认添加border样式class类名`ui-m-collapse--has-border`,为false的情况下添加类名`ui-m-collapse--no-border` | boolean | 否 | true |
| type | 默认添加类型类名`ui-m-collapse-normal`,为group的情况下添加类名`ui-m-collapse-group` | `normal` \| `group` | 否 | `normal` |
| isMobile | 内部控制,是否移动端 | boolean | 否 | true |
| direction | 折叠方向 | 'up'\|'down' | 否 | 'up' |
## 子组件

### MCollapse.Pannel

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| title | 面板标题 | React.ReactNode | 是 | - |
| disabled | 禁用 | boolean | 否 | - |
| showArrow | 是否显示箭头图标 | boolean | 否 | - |
| style | 复写样式 | React.CSSProperties | 否 | - |
| className | 复写类名 | string | 否 | - |
| id | 面板 id | string | 否 | - |
| iconPosition | 图标位置 | 'right' \| 'left' | 否 | 'right' |
| active | 是否激活 | boolean | 否 | - |
| onChange | 切换面板回调 | (key: string, active: boolean): void | 否 | - |
| panelKey | panel key | string | 否 | - |
| panelTitleBackground | panel标题的默认class,默认为`ui-m-collapse-panel__title--bg-default`,设置none时为为`ui-m-collapse-panel__title--bg-none` | string | 否 | - |
| isLast | 是否最后一个Pannel,控制样式 | boolean | 否 | - |
| bordered | 默认添加border样式class类名`ui-m-collapse--has-border`,为false的情况下添加类名`ui-m-collapse--no-border` | string | 否 | 'default' |
| type | 默认添加类型类名`ui-m-collapse-normal`,为group的情况下添加类名`ui-m-collapse-group` | `normal` \| `group` | 否 | `normal` |
| direction | 折叠方向 | 'up'\|'down' | 否 | 'up' |
