# Accordion

手风琴组件

- 通过visible设置初始展开或收起的状态, 可选true/false。
- 可通过onAccordionChange设置展开收起时额外的回调函数。
- 可通过hideIcon设置隐藏向下的箭头。

主要属性和接口：

- visible:初始展开或收起的状态, 默认false收起。 = hideIcon:设置隐藏向下的箭头, 默认false可见。
  如：

        <Accordion visible={true} hideIcon>
            <Accordion.Header>
                标题一
            </Accordion.Header>
            <Accordion.Body>
                ...
            </Accordion.Body>
        </Accordion>

- onAccordionChange:点击收起展开的额外的回调执行函数。
  如：

        <Accordion onAccordionChange={(visible)=>{console.log(visible);}}>
            <Accordion.Header>
                标题一
            </Accordion.Header>
            <Accordion.Body>
                ...
            </Accordion.Body>
        </Accordion>

### 方法

- onAccordionChange

### 属性

- classPrefix
- componentTag
- hideIcon
- visible

### 事件

Extends Component
Defined in: `src/Accordion.js:22`
Module: 操作类组件

Available since 0.4.0

## Constructor

### Accordion

`Accordion ()`

Defined in `src/Accordion.js:22`

Available since 0.4.0

#### Example:

    import React, { Component } from "react";
    import classnames from "classnames";
    import {Icon, Accordion} from "phoenix-ui";
    import Code from "./code/code";

    export default class accordion extends Component{

        constructor(props,context){
            super(props,context);

            this.state = {
                visible : false
            }
        }

        onAccordionChange(visible){
            alert(visible);
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Accordion</h2>
                    <h3 className="comp-type">visible(默认false) 初始可见值</h3>
                    <Accordion>
                        <Accordion.Header>
                            标题一-收起
                        </Accordion.Header>
                        <Accordion.Body>
                            <ul className="ph-accordion-list">
                                <li className="ph-accordion-item">内容一</li>
                            </ul>
                        </Accordion.Body>
                    </Accordion>
                    <Accordion visible={true}>
                        <Accordion.Header>
                            标题二-展开
                        </Accordion.Header>
                        <Accordion.Body>
                            <ul className="ph-accordion-list">
                                <li className="ph-accordion-item">内容一</li>
                                <li className="ph-accordion-item">内容二</li>
                            </ul>
                        </Accordion.Body>
                    </Accordion>
                    <Code target="accordion-visible" />

                    <h3 className="comp-type">hideIcon(默认false) 向下的按钮是否可见</h3>
                    <Accordion hideIcon>
                        <Accordion.Header>
                            标题一
                        </Accordion.Header>
                        <Accordion.Body>
                            <ul className="ph-accordion-list">
                                <li className="ph-accordion-item">内容一</li>
                            </ul>
                        </Accordion.Body>
                    </Accordion>
                    <Code target="accordion-hideicon" />

                    <h3 className="comp-type">onAccordionChange 展开收起的回调函数</h3>
                    <Accordion visible={this.state.visible} onAccordionChange={::this.onAccordionChange}>
                        <Accordion.Header>
                            标题一
                        </Accordion.Header>
                        <Accordion.Body>
                            <ul className="ph-accordion-list">
                                <li className="ph-accordion-item">内容一</li>
                                <li className="ph-accordion-item">内容二</li>
                            </ul>
                        </Accordion.Body>
                    </Accordion>
                    <Code target="accordion-onaccordionchange" />
                </div>
            );
        }
    }

## 方法

### onAccordionChange

`onAccordionChange ()`

Defined in `src/Accordion.js:87`

点击收起展开的回调函数

## 属性

### `classPrefix`

String

Defined in `src/Accordion.js:67`

样式前缀

Default:

`'accordion'`

### `componentTag`

String

Defined in `src/Accordion.js:74`

标签tagName

### `hideIcon`

Boolean

Defined in `src/Accordion.js:93`

向下的箭头是否可见， 默认可见

Default:

`false`

### `visible`

Boolean

Defined in `src/Accordion.js:80`

是否可见标识

Default:

`false`