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>
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