# src/Tab.js File

    import React, {PropTypes,Component} from 'react';
    import ClassNameMixin from './utils/ClassNameMixin';
    import {setPhoenixPrefix} from './utils/Tool';
    import classnames from 'classnames';

    /**
     * tab选项卡组件<br/>
     * - 通过heading设置选项卡的显示内容。
     * - 可通过onTabChange设置点击选项卡的回调函数。
     * - 可自定义className等常用属性以及事件。
     *
     * 具体属性和接口如下：
     * - heading:选项卡的显示内容, 默认'tab'
     * - onTabChange:点击事件的回调函数
     *
     * 示例:
     * ```code
     *     <Tabset activeIndex ={this.state.index} tabCallback={(index)=>{console.log(index);}>
     *         <Tab heading='标题1' className='tab-test'>
     *             横向内容1
     *         </Tab>
     *         <Tab heading='标题2' onTabChange={(index)=>{console.log(index);}>
     *             横向内容2
     *         </Tab>
     *     </Tabset>
     * ```
     *
     * @class Tab
     * @module 选项卡
     * @extends Component
     * @constructor
     * @since 0.1.0
     * @demo tab|tab.js{展示}
     * @show true
     * */

    @ClassNameMixin
    export default class Tab extends Component {
        static ProTypes = {
            /**
             * 选项卡的标题文字，默认为‘tab’
             * @property heading
             * @type String
             * @default 'tab'
             * */
            heading: PropTypes.string,
            /**
             * 点击事件的回调函数
             * @method onTabChange
             * @type Function
             * @default null
             * */
            onTabChange: PropTypes.func
        };

        static defaultProps = {
            heading: 'tab',
            activeIndex:0,
            vertical:false,
            onTabChange: null
        };

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

        handleClick(){
            this.props.changeActive(this.props.index);
            this.props.onTabChange && this.props.onTabChange(this.props.index);
        }

        isActive(){
            return this.props.index == this.props.activeIndex ? 'active':'';
        }

        isVertical(){
            return !!this.props.vertical ? '':setPhoenixPrefix('col');
        }

        render(){
            let {className,onClick,...other} = this.props;
            return(
                <li className={
                    classnames(
                        this.isVertical(),
                        setPhoenixPrefix('tab-nav'),
                        this.isActive(),
                        className
                    )
                } onClick={::this.handleClick} {...other}>
                    {this.props.heading}
                </li>
            )
        }
    }