---
name: Tab
menu: Components
---

# Tab
import Tab, {TabPanel} from './index'
import './style/index.scss'
import {Playground, Props} from 'docz'

## Props & Methods
<Props of={Tab} />


## Basic Usage
<Playground>
<Tab className="wafaha">
<TabPanel tab="OPTION 1">
    <p>Panel 1</p>
</TabPanel>
<TabPanel tab="OPTION 2">
    <p>Panel 2</p>
</TabPanel>
<TabPanel tab="OPTION 3">
    <p>Panel 3</p>
</TabPanel>
</Tab>
</Playground>

## No Destroy
<Playground>
    <Tab shouldDestroy={false}>
        <TabPanel tab="OPTION 1">
            <p>Panel 1</p>
        </TabPanel>
        <TabPanel tab="OPTION 2">
            <p>Panel 2</p>
        </TabPanel>
        <TabPanel tab="OPTION 3">
            <p>Panel 3</p>
        </TabPanel>
    </Tab>
</Playground>

## Tab Types
<Playground>
    <Tab tabType="bottom">
    <TabPanel tab="BOTTOM 1">
        <p>Panel 1: The tabType is 'bottom'</p>
    </TabPanel>
    <TabPanel tab="BOTTOM 2">
        <p>Panel 2: The tabType is 'bottom'</p>
    </TabPanel>
    <TabPanel tab="BOTTOM 3">
        <p>Panel 3: The tabType is 'bottom'</p>
    </TabPanel>
    </Tab>
    <div style={{ height: '30px' }}></div>
    <Tab tabType="top">
        <TabPanel tab="TOP 1">
            <p>Panel 1: The tabType is 'top'</p>
        </TabPanel>
        <TabPanel tab="TOP 2">
            <p>Panel 2: The tabType is 'top'</p>
        </TabPanel>
        <TabPanel tab="TOP 3">
            <p>Panel 3: The tabType is 'top'</p>
        </TabPanel>
    </Tab>
    <div style={{ height: '30px' }}></div>
    <Tab tabType="fit">
    <TabPanel tab="FIT 1">
        <p>Panel 1: The tabType is 'fit'</p>
    </TabPanel>
    <TabPanel tab="FIIIIIIIT 2">
        <p>Panel 2: The tabType is 'fit'</p>
    </TabPanel>
    <TabPanel tab="FIIIIIIIIIIIIIIIIIIIT 3">
        <p>Panel 3: The tabType is 'fit'</p>
    </TabPanel>
    </Tab>
    <div style={{ height: '30px' }}></div>
    <Tab tabType="border">
        <TabPanel tab="BORDER 1">
            <p>Panel 1: The tabType is 'border'</p>
        </TabPanel>
        <TabPanel tab="BORDER 2">
            <p>Panel 2: The tabType is 'border'</p>
        </TabPanel>
        <TabPanel tab="BORDER 3">
            <p>Panel 3: The tabType is 'border'</p>
        </TabPanel>
    </Tab>
</Playground>

## Tab Scenes
<Playground>
    <Tab tabScene="center">
        <TabPanel tab="OPTION 1">
            <p>Panel 1: The tabScene is 'center'</p>
        </TabPanel>
        <TabPanel tab="OPTION 2">
            <p>Panel 2: The tabScene is 'center'</p>
        </TabPanel>
        <TabPanel tab="OPTION 3">
            <p>Panel 3: The tabScene is 'center'</p>
        </TabPanel>
    </Tab>
    <div style={{ height: '30px' }}></div>
    <Tab tabScene="bookmark">
        <TabPanel tab="OPTION 1">
            <p>Panel 1: The tabScene is 'bookmark'</p>
        </TabPanel>
        <TabPanel tab="OPTION 2">
            <p>Panel 2: The tabScene is 'bookmark'</p>
        </TabPanel>
        <TabPanel tab="OPTION 3">
            <p>Panel 3: The tabScene is 'bookmark'</p>
        </TabPanel>
    </Tab>
    <div style={{ height: '30px' }}></div>
    <Tab tabScene="banner">
        <TabPanel tab="OPTION 1">
            <p>Panel 1: The tabScene is 'banner'</p>
        </TabPanel>
        <TabPanel tab="OPTION 2">
            <p>Panel 2: The tabScene is 'banner'</p>
        </TabPanel>
        <TabPanel tab="OPTION 3">
            <p>Panel 3: The tabScene is 'banner'</p>
        </TabPanel>
    </Tab>
</Playground>

## Active
<Playground>
    <Tab active="2">
        <TabPanel tab="OPTION 1">
            <p>Panel 1</p>
        </TabPanel>
        <TabPanel tab="OPTION 2">
            <p>Panel 2</p>
        </TabPanel>
        <TabPanel tab="OPTION 3">
            <p>Panel 3</p>
        </TabPanel>
    </Tab>
</Playground>

## OnActive
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                prev: '2',
                active: -1,
            }
            this.handleActive = this.handleActive.bind(this);
        }
        handleActive(...param) {
            this.setState({
                active: `${param[0]}`,
                prev: param[1],
            });
        }
        render(){
            return <>
            <p>选中了第 {this.state.active} 项，上一次选中是 {this.state.prev}</p>
            <Tab
                active={this.state.active}
                onActive={this.handleActive}
            >
                <TabPanel tab="OPTION 1">
                <p>面板1</p>
                </TabPanel>
                <TabPanel tab="OPTION 2">
                <p>面板2</p>
                </TabPanel>
                <TabPanel tab="OPTION 3">
                <p>面板3</p>
                </TabPanel>
            </Tab>
            </>
        }
    }
    return <Example />
}
}
</Playground>

## OnBeforeActive
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                prev: '2',
                active: -1,
                visible: false,
            }
            this.handleActive = this.handleActive.bind(this);
        }
        handleActive(...param) {
            this.setState({
                active: `${param[0]}`,
                prev: param[1],
            });
        }
        handleBeforeActive(next) {
            if (next === 0) {
                alert("没骗你吧？！选不中第 0 项！");
                return false;
            }
        }
        render(){
            return <>
            <p>选中了第 {this.state.active} 项，上一次选中的是 {this.state.prev}</p>
            <Tab
            tabType='fit'
            active={this.state.active}
            onBeforeActive={this.handleBeforeActive}
            onActive={this.handleActive}
            >
            <TabPanel tab="Cannot be selected! Have a try?">
                <p>Panel 1</p>
            </TabPanel>
            <TabPanel tab="OPTION 2">
                <p>Panel 2</p>
            </TabPanel>
            <TabPanel tab="OPTION 3">
                <p>Panel 3</p>
            </TabPanel>
            </Tab>
            </>
        }
    }
    return <Example />
}
}
</Playground>