Accordion

手风琴组件

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

主要属性和接口：

  • visible:初始展开或收起的状态, 默认false收起。 = hideIcon:设置隐藏向下的箭头, 默认false可见。
    如：
      <Accordion visible={true} hideIcon>
      <Accordion.Header>
          标题一
      </Accordion.Header>
      <Accordion.Body>
          ...
      </Accordion.Body>
  </Accordion>
  • clickCallback:点击收起展开的额外的回调执行函数。
    如：
      <Accordion clickCallback={(visible)=>{console.log(visible);}}>
      <Accordion.Header>
          标题一
      </Accordion.Header>
      <Accordion.Body>
          ...
      </Accordion.Body>
  </Accordion>
Extends Component
Defined in: src/accordion/index.js:25
Module: 操作类组件

Available since 0.4.0

Constructor

Accordion

Accordion ()

Defined in src/accordion/index.js:25

Available since 0.4.0

Example:

import React, { Component } from "react"
import classnames from "classnames"

import Accordion from "phoenix-ui/lib/accordion"
import List from "phoenix-ui/lib/list"
import Col from "phoenix-ui/lib/grid/Col"
import Code from "./code/code"

export default class accordion extends Component{

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

        this.state = {
            visible : false
        }
    }

    clickCallback(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>
                        <List>
                            <List.Item>
                                <List.Col>未上线单店</List.Col>
                            </List.Item>
                            <List.Item>
                                <List.Col>未上线连锁店</List.Col>
                            </List.Item>
                        </List>
                    </Accordion.Body>
                </Accordion>
                <Accordion visible>
                    <Accordion.Header>标题二(展开状态)</Accordion.Header>
                    <Accordion.Body>
                        <List>
                            <List.Item>
                                <List.Col>未上线单店</List.Col>
                            </List.Item>
                            <List.Item>
                                <List.Col>未上线连锁店</List.Col>
                            </List.Item>
                        </List>
                    </Accordion.Body>
                </Accordion>
                <Code target="accordion-visible" />

                <h3 className="comp-type">hideIcon(默认false) 向下的按钮是否可见</h3>
                <Accordion hideIcon>
                    <Accordion.Header>
                        标题一
                    </Accordion.Header>
                    <Accordion.Body>
                        <List>
                            <List.Item>
                                <List.Col>未上线单店</List.Col>
                            </List.Item>
                            <List.Item>
                                <List.Col>未上线连锁店</List.Col>
                            </List.Item>
                        </List>
                    </Accordion.Body>
                </Accordion>
                <Code target="accordion-hideicon" />

                <h3 className="comp-type">clickCallback 展开收起的回调函数</h3>
                <Accordion visible={this.state.visible} clickCallback={this.clickCallback.bind(this)}>
                    <Accordion.Header>
                        标题一
                    </Accordion.Header>
                    <Accordion.Body>
                        <List>
                            <List.Item>
                                <List.Col>未上线单店</List.Col>
                            </List.Item>
                            <List.Item>
                                <List.Col>未上线连锁店</List.Col>
                            </List.Item>
                        </List>
                    </Accordion.Body>
                </Accordion>
                <Code target="accordion-clickcallback" />
            </div>
        );
    }
}

方法

clickCallback

clickCallback
(
  • visible
)

Defined in src/accordion/index.js:90

点击收起展开的回调函数

参数:

visible Boolean

当前收起展开的状态
参数名类型标识描述
visible Boolean

当前收起展开的状态

属性

classPrefix

String

Defined in src/accordion/index.js:70

样式前缀

Default:

'accordion'

componentTag

String

Defined in src/accordion/index.js:77

标签tagName

hideIcon

Boolean

Defined in src/accordion/index.js:97

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

Default:

false

visible

Boolean

Defined in src/accordion/index.js:83

是否可见标识

Default:

false