Tabs 标签页

选项卡切换组件。

何时使用#

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

Ant Design 依次提供了三级选项卡，分别用于不同的场景。

卡片式的页签，提供可关闭的样式，常用于容器顶部。
标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
RadioButton 可作为更次级的页签来使用。

API#

Tabs#

参数	说明	类型	默认值
activeKey	当前激活 tab 面板的 key	String	无
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	String	第一个面板
onChange	切换面板的回调	Function	无
onTabClick	tab 被点击的回调	Function	无
tabBarExtraContent	tab bar 上额外的元素	React Node	无
type	页签的基本样式，可选 `line`、`card` `editable-card` 类型	String	'line'
tabPosition	页签位置，可选值有 `top` `right` `bottom` `left`	String	'top'
onEdit	新增和删除页签的回调，在 `type="editable-card"` 时有效	Function(targetKey, action)	无

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>
, mountNode);

基本

默认选中第一项。

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>
, mountNode);

图标

有图标的标签。

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

const operations = <Button>额外操作</Button>;

ReactDOM.render(
<Tabs tabBarExtraContent={operations}>
  <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
  <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
  <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
</Tabs>, mountNode);

附加内容

可以在页签右边添加附加操作。

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

const Demo = React.createClass({
  getInitialState() {
    return {
      tabPosition: 'top',
    };
  },
  changeTabPosition(tabPosition) {
    this.setState({ tabPosition });
  },
  render() {
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          页签位置：
          <Select value={this.state.tabPosition} onChange={this.changeTabPosition}
            dropdownMatchSelectWidth={false}>
            <Option value="top">top</Option>
            <Option value="bottom">bottom</Option>
            <Option value="left">left</Option>
            <Option value="right">right</Option>
          </Select>
        </div>
        <Tabs tabPosition={this.state.tabPosition}>
          <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
          <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
          <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
        </Tabs>
      </div>
    );
  }
});

ReactDOM.render(<Demo />, mountNode);

位置

有四个位置，tabPosition="left|right|top|bottom"。

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

const Demo = React.createClass({
  getInitialState() {
    this.newTabIndex = 0;
    const panes = [
      <TabPane tab="选项卡" key="1">选项卡一内容</TabPane>,
      <TabPane tab="选项卡" key="2">选项卡二内容</TabPane>,
    ];
    return {
      activeKey: panes[0].key,
      panes,
    };
  },
  onChange(activeKey) {
    this.setState({ activeKey });
  },
  onEdit(targetKey, action) {
    this[action](targetKey);
  },
  add() {
    const panes = this.state.panes;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push(<TabPane tab="新建页签" key={activeKey}>新页面</TabPane>);
    this.setState({ panes, activeKey });
  },
  remove(targetKey) {
    let activeKey = this.state.activeKey;
    let lastIndex = this.state.panes.findIndex(pane => pane.key === targetKey) - 1;
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (activeKey === targetKey) {
      activeKey = panes[lastIndex >= 0 ? lastIndex : 0].key;
    }
    this.setState({ panes, activeKey });
  },
  render() {
    return (
      <Tabs onChange={this.onChange} activeKey={this.state.activeKey}
        type="editable-card" onEdit={this.onEdit}>
        {this.state.panes}
      </Tabs>
    );
  }
});

ReactDOM.render(<Demo />, mountNode);

新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。

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

ReactDOM.render(
  <Tabs defaultActiveKey="1">
    <TabPane tab="选项卡一" key="1">选项卡一</TabPane>
    <TabPane tab="选项卡二" disabled key="2">选项卡二</TabPane>
    <TabPane tab="选项卡三" key="3">选项卡三</TabPane>
  </Tabs>
, mountNode);

禁用

禁用某一项。

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

ReactDOM.render(
  <Tabs defaultActiveKey="1">
    <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>
, mountNode);

滑动

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

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>
, mountNode);

迷你型

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

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

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

ReactDOM.render(
  <Tabs onChange={callback} type="card">
    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
  </Tabs>
, mountNode);

卡片式页签

另一种样式的页签，不提供对应的垂直样式。

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

ReactDOM.render(
<div className="card-container">
  <Tabs type="card">
    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
  </Tabs>
</div>, mountNode);

#components-tabs-demo-card-top {
  background: #ECECEC;
  overflow: hidden;
  padding: 24px;
}

.card-container > .ant-tabs-card .ant-tabs-content {
  background: #fff;
  padding: 16px;
  height: 120px;
  margin-top: -16px;
}
.card-container > .ant-tabs-card .ant-tabs-tabs-bar,
.card-container > .ant-tabs-card .ant-tabs-tab-active {
  border-color: #fff;
}

卡片式页签容器

用于容器顶部，需要一点额外的样式覆盖。