Tabs 标签页

选项卡切换组件。

何时使用#

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

API#

Tabs#

参数	说明	类型	默认值
activeKey	当前激活 tab 面板的 key	String	无
animation	是否启用面板切换动画	String	空。目前只支持 slide-horizontal
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	String	第一个面板
onChange	切换面板的回调	Function	无
onTabClick	tab 被点击的回调	Function	无
tabBarExtraContent	tab bar 上格外的元素	React Node	无

Tabs.TabPane#

参数	说明	类型	默认值
key	对应 activeKey	String	无
tab	选项卡头显示文字	React.Element or String	无

代码演示

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-basic'));

基本

默认选中第一项。

import { Tabs, Icon } from 'antd';
const TabPane = Tabs.TabPane;

const tabContent = [
  <span><Icon type="apple" />选项卡一</span>,
  <span><Icon type="android" />选项卡二</span>,
  <span><Icon type="lock" />选项卡三</span>,
];

ReactDOM.render(
  <Tabs defaultActiveKey="2">
    <TabPane tab={tabContent[0]} key="1">选项卡一</TabPane>
    <TabPane tab={tabContent[1]} key="2">选项卡二</TabPane>
    <TabPane tab={tabContent[2]} key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-icon'));

图标

有图标的标签。

import { Tabs, Button, Icon, message } from 'antd';
const TabPane = Tabs.TabPane;

let index = 0;
const closeStyle = {
  position: 'absolute',
  top: 8,
  right: -9,
};

const addStyle = {
  pointerEvents: 'auto',
  color: '#2db7f5',
  position: 'absolute',
  top: 8,
  left: 0,
  marginLeft: -8,
};

const Test = React.createClass({
  getInitialState() {
    return {
      tabs: [{
        title: 'title ' + index,
        content: 'content ' + index,
        index: index
      }],
      activeKey: index.toString()
    };
  },
  remove(targetIndex, e) {
    e.stopPropagation();
    let tabs = this.state.tabs;
    let activeKey = this.state.activeKey;
    let foundIndex = 0;

    if(tabs.length === 1) {
      message.error('仅剩一个，不能删除');
      return;
    }

    const newTabs = tabs.filter(tab => {
      if (tab.index !== targetIndex) {
        return true;
      } else {
        foundIndex = targetIndex;
        return false;
      }
    });

    if (activeKey === targetIndex) {
      activeKey = tabs[foundIndex - 1].index;
    }

    this.setState({
      tabs: newTabs, activeKey
    });
  },
  add() {
    index += 1;
    this.setState({
      tabs: this.state.tabs.concat({
        title: 'title ' + index,
        content: 'content ' + index,
        index: index,
      }),
      activeKey: index.toString(),
    });
  },
  onChange(activeKey) {
    console.log(activeKey);
    this.setState({ activeKey });
  },
  render() {
    const addBtn = <Icon style={addStyle} type="plus-circle" onClick={this.add} />;
    const operations = <Button style={{ marginTop: 2 }}>操作</Button>;
    return (
      <Tabs onChange={this.onChange}
        activeKey={this.state.activeKey}
        tabBarExtraContent={operations}>
        {
          this.state.tabs.map(tab => (
            <TabPane key={tab.index} tab={
              <div>
                {tab.title}
                <Icon type="cross" style={closeStyle} onClick={this.remove.bind(this, tab.index)} />
              </div>
            }>{tab.content}</TabPane>
          ))
        }
        <TabPane key="__add" disabled tab={addBtn} />
      </Tabs>
    );
  }
});

ReactDOM.render(<Test />, document.getElementById('components-tabs-demo-add'));

动态的页签

演示添加删除和附加操作。

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="1" tabPosition="left">
    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
    <TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-vertical-left'));

垂直

选项卡在左边。

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

function callback(key) {}

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="选项卡一" key="1">选项卡一</TabPane>
    <TabPane tab="选项卡二" disabled key="2">选项卡二</TabPane>
    <TabPane tab="选项卡三" key="3">选项卡三</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-disabled'));

禁用

禁用某一项。

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

function callback(key) {}

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="选项一" key="1">选项卡一</TabPane>
    <TabPane tab="选项二" key="2">选项卡二</TabPane>
    <TabPane tab="选项三" key="3">选项卡三</TabPane>
    <TabPane tab="选项四" key="4">选项卡四</TabPane>
    <TabPane tab="选项五" key="5">选项卡五</TabPane>
    <TabPane tab="选项六" key="6">选项卡六</TabPane>
    <TabPane tab="选项七" key="7">选项卡七</TabPane>
    <TabPane tab="选项八" key="8">选项卡八</TabPane>
    <TabPane tab="选项九" key="9">选项卡九</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-slide'));

滑动

可以左右滑动，容纳更多标签。

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="2" size="small">
    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-size'));

迷你型

用在弹出框等较狭窄的容器内。

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

ReactDOM.render(
  <Tabs defaultActiveKey="1" tabPosition="right">
    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
    <TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane>
  </Tabs>
, document.getElementById('components-tabs-demo-vertical-right'));

垂直

选项卡在右边。