Tabs 标签页

选项卡切换组件。

何时使用

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

API

Tabs

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

Tabs.TabPane

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

组件演示

var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane;

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

React.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'));

基本

默认选中第一项。

var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane;

function callback(key) {}

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

禁用

禁用某一项。

var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane;

function callback(key) {}

React.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'));

滑动

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

var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane;

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

迷你型

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

var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane;

var tabContent = [
  <span><i className="anticon anticon-apple"></i>选项卡一</span>,
  <span><i className="anticon anticon-android"></i>选项卡二</span>,
  <span><i className="anticon anticon-lock"></i>选项卡三</span>,
];

React.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'));

图标

有图标的标签。