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 页签的基本样式,可选 linecard 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: 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;
}

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