---
name: Tabs 标签页
route: /tabs
parent: 组件
menu: 数据展示
---
import { Playground, Props } from 'docz'
import  Tabs,{TabPanel}  from '../components/tabs'


# Tabs
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
    <Tabs defaultActiveKey="1" tabHeaderAlign="left">
        <TabPanel title="测试1" key="1">
          Content of Tab Pane 1
        </TabPanel>
        <TabPanel title="Tab 2" key="2">
          Content of Tab Pane 2
        </TabPanel>
        <TabPanel title="Tab 3" key="3">
          Content of Tab Pane 3
        </TabPanel>
      </Tabs>
</Playground>

## tabsLocation

<Playground>
    <Tabs defaultActiveKey="1" tabsLocation="left" showUnderLine={false}>
        <TabPanel title={
        <span>test</span>
        } key="1">
          Content of Tab Pane 1
        </TabPanel>
        <TabPanel title="Tab 2" key="2">
          Content of Tab Pane 2
        </TabPanel>
        <TabPanel title="Tab 3" key="3">
          Content of Tab Pane 3
        </TabPanel>
      </Tabs>
</Playground>


## tabHeaderAlign
控制 Tab Header的位置 `left`,`center`, `right`

<Playground>
    <Tabs defaultActiveKey="1" tabHeaderAlign="center">
        <TabPanel title="测试1" key="1">
          Content of Tab Pane 1
        </TabPanel>
        <TabPanel title="Tab 2" key="2">
          Content of Tab Pane 2
        </TabPanel>
        <TabPanel title="Tab 3" key="3">
          Content of Tab Pane 3
        </TabPanel>
      </Tabs>
</Playground>

## animation
控制是否开启切换动画

<Playground>
    <Tabs defaultActiveKey="1" animation={false}>
        <TabPanel title="测试1" key="1">
          Content of Tab Pane 1
        </TabPanel>
        <TabPanel title="Tab 2" key="2">
          Content of Tab Pane 2
        </TabPanel>
        <TabPanel title="Tab 3" key="3">
          Content of Tab Pane 3
        </TabPanel>
      </Tabs>
</Playground>

## API


<Props of={Tabs} />