Tabs标签页

选项卡切换组件。

何时使用

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

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

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。

  • 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。

  • Radio.Button 可作为更次级的页签来使用。

代码演示

Tabs标签页 - 图1

基本

默认选中第一项。

  1. import { Tabs } from 'antd';
  3. const { TabPane } = Tabs;
  5. function callback(key) {
  6.   console.log(key);
  7. }
  9. const Demo = () => (
  10.   <Tabs defaultActiveKey="1" onChange={callback}>
  11.     <TabPane tab="Tab 1" key="1">
  12.       Content of Tab Pane 1
  13.     </TabPane>
  14.     <TabPane tab="Tab 2" key="2">
  15.       Content of Tab Pane 2
  16.     </TabPane>
  17.     <TabPane tab="Tab 3" key="3">
  18.       Content of Tab Pane 3
  19.     </TabPane>
  20.   </Tabs>
  21. );
  23. ReactDOM.render(<Demo />, mountNode);

Tabs标签页 - 图2

禁用

禁用某一项。

  1. import { Tabs } from 'antd';
  3. const { TabPane } = Tabs;
  5. ReactDOM.render(
  6.   <Tabs defaultActiveKey="1">
  7.     <TabPane tab="Tab 1" key="1">
  8.       Tab 1
  9.     </TabPane>
  10.     <TabPane tab="Tab 2" disabled key="2">
  11.       Tab 2
  12.     </TabPane>
  13.     <TabPane tab="Tab 3" key="3">
  14.       Tab 3
  15.     </TabPane>
  16.   </Tabs>,
  17.   mountNode,
  18. );

Tabs标签页 - 图3

居中

标签居中展示。

  1. import { Tabs } from 'antd';
  3. const { TabPane } = Tabs;
  5. const Demo = () => (
  6.   <Tabs defaultActiveKey="1" centered>
  7.     <TabPane tab="Tab 1" key="1">
  8.       Content of Tab Pane 1
  9.     </TabPane>
  10.     <TabPane tab="Tab 2" key="2">
  11.       Content of Tab Pane 2
  12.     </TabPane>
  13.     <TabPane tab="Tab 3" key="3">
  14.       Content of Tab Pane 3
  15.     </TabPane>
  16.   </Tabs>
  17. );
  19. ReactDOM.render(<Demo />, mountNode);

Tabs标签页 - 图4

图标

有图标的标签。

  1. import { Tabs } from 'antd';
  2. import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
  4. const { TabPane } = Tabs;
  6. ReactDOM.render(
  7.   <Tabs defaultActiveKey="2">
  8.     <TabPane
  9.       tab={
  10.         <span>
  11.           <AppleOutlined />
  12.           Tab 1
  13.         </span>
  14.       }
  15.       key="1"
  16.     >
  17.       Tab 1
  18.     </TabPane>
  19.     <TabPane
  20.       tab={
  21.         <span>
  22.           <AndroidOutlined />
  23.           Tab 2
  24.         </span>
  25.       }
  26.       key="2"
  27.     >
  28.       Tab 2
  29.     </TabPane>
  30.   </Tabs>,
  31.   mountNode,
  32. );

Tabs标签页 - 图5

滑动

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

  1. import { Tabs, Radio } from 'antd';
  3. const { TabPane } = Tabs;
  5. class SlidingTabsDemo extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {
  9.       mode: 'top',
  10.     };
  11.   }
  13.   handleModeChange = e => {
  14.     const mode = e.target.value;
  15.     this.setState({ mode });
  16.   };
  18.   render() {
  19.     const { mode } = this.state;
  20.     return (
  21.       <div>
  22.         <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
  23.           <Radio.Button value="top">Horizontal</Radio.Button>
  24.           <Radio.Button value="left">Vertical</Radio.Button>
  25.         </Radio.Group>
  26.         <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
  27.           {[...Array.from({ length: 30 }, (v, i) => i)].map(i => (
  28.             <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
  29.               Content of tab {i}
  30.             </TabPane>
  31.           ))}
  32.         </Tabs>
  33.       </div>
  34.     );
  35.   }
  36. }
  38. ReactDOM.render(<SlidingTabsDemo />, mountNode);

Tabs标签页 - 图6

附加内容

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

  1. import { Tabs, Button, Divider, Checkbox } from 'antd';
  3. const { TabPane } = Tabs;
  5. const CheckboxGroup = Checkbox.Group;
  7. const operations = <Button>Extra Action</Button>;
  9. const OperationsSlot = {
  10.   left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
  11.   right: <Button>Right Extra Action</Button>,
  12. };
  14. const options = ['left', 'right'];
  16. const Demo = () => {
  17.   const [position, setPosition] = React.useState(['left', 'right']);
  19.   const slot = React.useMemo(() => {
  20.     if (position.length === 0) return null;
  22.     return position.reduce(
  23.       (acc, direction) => ({ ...acc, [direction]: OperationsSlot[direction] }),
  24.       {},
  25.     );
  26.   }, [position]);
  28.   return (
  29.     <>
  30.       <Tabs tabBarExtraContent={operations}>
  31.         <TabPane tab="Tab 1" key="1">
  32.           Content of tab 1
  33.         </TabPane>
  34.         <TabPane tab="Tab 2" key="2">
  35.           Content of tab 2
  36.         </TabPane>
  37.         <TabPane tab="Tab 3" key="3">
  38.           Content of tab 3
  39.         </TabPane>
  40.       </Tabs>
  41.       <br />
  42.       <br />
  43.       <br />
  44.       <div>You can also specify its direction or both side</div>
  45.       <Divider />
  46.       <CheckboxGroup
  47.         options={options}
  48.         value={position}
  49.         onChange={value => {
  50.           setPosition(value);
  51.         }}
  52.       />
  53.       <br />
  54.       <br />
  55.       <Tabs tabBarExtraContent={slot}>
  56.         <TabPane tab="Tab 1" key="1">
  57.           Content of tab 1
  58.         </TabPane>
  59.         <TabPane tab="Tab 2" key="2">
  60.           Content of tab 2
  61.         </TabPane>
  62.         <TabPane tab="Tab 3" key="3">
  63.           Content of tab 3
  64.         </TabPane>
  65.       </Tabs>
  66.     </>
  67.   );
  68. };
  70. ReactDOM.render(<Demo />, mountNode);
  1. .tabs-extra-demo-button {
  2.   margin-right: 16px;
  3. }
  5. .ant-row-rtl .tabs-extra-demo-button {
  6.   margin-right: 0;
  7.   margin-left: 16px;
  8. }

Tabs标签页 - 图7

大小

大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。

  1. import { Tabs, Radio } from 'antd';
  3. const { TabPane } = Tabs;
  5. class Demo extends React.Component {
  6.   state = { size: 'small' };
  8.   onChange = e => {
  9.     this.setState({ size: e.target.value });
  10.   };
  12.   render() {
  13.     const { size } = this.state;
  14.     return (
  15.       <div>
  16.         <Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }}>
  17.           <Radio.Button value="small">Small</Radio.Button>
  18.           <Radio.Button value="default">Default</Radio.Button>
  19.           <Radio.Button value="large">Large</Radio.Button>
  20.         </Radio.Group>
  21.         <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
  22.           <TabPane tab="Tab 1" key="1">
  23.             Content of tab 1
  24.           </TabPane>
  25.           <TabPane tab="Tab 2" key="2">
  26.             Content of tab 2
  27.           </TabPane>
  28.           <TabPane tab="Tab 3" key="3">
  29.             Content of tab 3
  30.           </TabPane>
  31.         </Tabs>
  32.         <Tabs defaultActiveKey="1" type="card" size={size}>
  33.           <TabPane tab="Card Tab 1" key="1">
  34.             Content of card tab 1
  35.           </TabPane>
  36.           <TabPane tab="Card Tab 2" key="2">
  37.             Content of card tab 2
  38.           </TabPane>
  39.           <TabPane tab="Card Tab 3" key="3">
  40.             Content of card tab 3
  41.           </TabPane>
  42.         </Tabs>
  43.       </div>
  44.     );
  45.   }
  46. }
  48. ReactDOM.render(<Demo />, mountNode);

Tabs标签页 - 图8

位置

有四个位置，tabPosition="left|right|top|bottom"。在移动端下，left|right 会自动切换成 top。

  1. import { Tabs, Radio, Space } from 'antd';
  3. const { TabPane } = Tabs;
  5. class Demo extends React.Component {
  6.   state = {
  7.     tabPosition: 'left',
  8.   };
  10.   changeTabPosition = e => {
  11.     this.setState({ tabPosition: e.target.value });
  12.   };
  14.   render() {
  15.     const { tabPosition } = this.state;
  16.     return (
  17.       <>
  18.         <Space style={{ marginBottom: 24 }}>
  19.           Tab position:
  20.           <Radio.Group value={tabPosition} onChange={this.changeTabPosition}>
  21.             <Radio.Button value="top">top</Radio.Button>
  22.             <Radio.Button value="bottom">bottom</Radio.Button>
  23.             <Radio.Button value="left">left</Radio.Button>
  24.             <Radio.Button value="right">right</Radio.Button>
  25.           </Radio.Group>
  26.         </Space>
  27.         <Tabs tabPosition={tabPosition}>
  28.           <TabPane tab="Tab 1" key="1">
  29.             Content of Tab 1
  30.           </TabPane>
  31.           <TabPane tab="Tab 2" key="2">
  32.             Content of Tab 2
  33.           </TabPane>
  34.           <TabPane tab="Tab 3" key="3">
  35.             Content of Tab 3
  36.           </TabPane>
  37.         </Tabs>
  38.       </>
  39.     );
  40.   }
  41. }
  43. ReactDOM.render(<Demo />, mountNode);

Tabs标签页 - 图9

卡片式页签

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

  1. import { Tabs } from 'antd';
  3. const { TabPane } = Tabs;
  5. function callback(key) {
  6.   console.log(key);
  7. }
  9. ReactDOM.render(
  10.   <Tabs onChange={callback} type="card">
  11.     <TabPane tab="Tab 1" key="1">
  12.       Content of Tab Pane 1
  13.     </TabPane>
  14.     <TabPane tab="Tab 2" key="2">
  15.       Content of Tab Pane 2
  16.     </TabPane>
  17.     <TabPane tab="Tab 3" key="3">
  18.       Content of Tab Pane 3
  19.     </TabPane>
  20.   </Tabs>,
  21.   mountNode,
  22. );

Tabs标签页 - 图10

新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭。

  1. import { Tabs } from 'antd';
  3. const { TabPane } = Tabs;
  5. const initialPanes = [
  6.   { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
  7.   { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
  8.   {
  9.     title: 'Tab 3',
  10.     content: 'Content of Tab 3',
  11.     key: '3',
  12.     closable: false,
  13.   },
  14. ];
  16. class Demo extends React.Component {
  17.   newTabIndex = 0;
  19.   state = {
  20.     activeKey: initialPanes[0].key,
  21.     panes: initialPanes,
  22.   };
  24.   onChange = activeKey => {
  25.     this.setState({ activeKey });
  26.   };
  28.   onEdit = (targetKey, action) => {
  29.     this[action](targetKey);
  30.   };
  32.   add = () => {
  33.     const { panes } = this.state;
  34.     const activeKey = `newTab${this.newTabIndex++}`;
  35.     const newPanes = [...panes];
  36.     newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
  37.     this.setState({
  38.       panes: newPanes,
  39.       activeKey,
  40.     });
  41.   };
  43.   remove = targetKey => {
  44.     const { panes, activeKey } = this.state;
  45.     let newActiveKey = activeKey;
  46.     let lastIndex;
  47.     panes.forEach((pane, i) => {
  48.       if (pane.key === targetKey) {
  49.         lastIndex = i - 1;
  50.       }
  51.     });
  52.     const newPanes = panes.filter(pane => pane.key !== targetKey);
  53.     if (newPanes.length && newActiveKey === targetKey) {
  54.       if (lastIndex >= 0) {
  55.         newActiveKey = newPanes[lastIndex].key;
  56.       } else {
  57.         newActiveKey = newPanes[0].key;
  58.       }
  59.     }
  60.     this.setState({
  61.       panes: newPanes,
  62.       activeKey: newActiveKey,
  63.     });
  64.   };
  66.   render() {
  67.     const { panes, activeKey } = this.state;
  68.     return (
  69.       <Tabs
  70.         type="editable-card"
  71.         onChange={this.onChange}
  72.         activeKey={activeKey}
  73.         onEdit={this.onEdit}
  74.       >
  75.         {panes.map(pane => (
  76.           <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
  77.             {pane.content}
  78.           </TabPane>
  79.         ))}
  80.       </Tabs>
  81.     );
  82.   }
  83. }
  85. ReactDOM.render(<Demo />, mountNode);

Tabs标签页 - 图11

卡片式页签容器

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

  1. import { Tabs } from 'antd';
  3. const { TabPane } = Tabs;
  5. ReactDOM.render(
  6.   <div className="card-container">
  7.     <Tabs type="card">
  8.       <TabPane tab="Tab Title 1" key="1">
  9.         <p>Content of Tab Pane 1</p>
  10.         <p>Content of Tab Pane 1</p>
  11.         <p>Content of Tab Pane 1</p>
  12.       </TabPane>
  13.       <TabPane tab="Tab Title 2" key="2">
  14.         <p>Content of Tab Pane 2</p>
  15.         <p>Content of Tab Pane 2</p>
  16.         <p>Content of Tab Pane 2</p>
  17.       </TabPane>
  18.       <TabPane tab="Tab Title 3" key="3">
  19.         <p>Content of Tab Pane 3</p>
  20.         <p>Content of Tab Pane 3</p>
  21.         <p>Content of Tab Pane 3</p>
  22.       </TabPane>
  23.     </Tabs>
  24.   </div>,
  25.   mountNode,
  26. );
  1. .card-container p {
  2.   margin: 0;
  3. }
  4. .card-container > .ant-tabs-card .ant-tabs-content {
  5.   height: 120px;
  6.   margin-top: -16px;
  7. }
  8. .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  9.   background: #fff;
  10.   padding: 16px;
  11. }
  12. .card-container > .ant-tabs-card > .ant-tabs-nav::before {
  13.   display: none;
  14. }
  15. .card-container > .ant-tabs-card .ant-tabs-tab,
  16. [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
  17.   border-color: transparent;
  18.   background: transparent;
  19. }
  20. .card-container > .ant-tabs-card .ant-tabs-tab-active,
  21. [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  22.   border-color: #fff;
  23.   background: #fff;
  24. }
  25. #components-tabs-demo-card-top .code-box-demo {
  26.   background: #f5f5f5;
  27.   overflow: hidden;
  28.   padding: 24px;
  29. }
  30. [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
  31.   height: 120px;
  32.   margin-top: -8px;
  33. }
  34. [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
  35.   border-color: transparent;
  36.   background: transparent;
  37. }
  38. [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
  39.   background: #000;
  40. }
  41. [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  42.   background: #141414;
  43. }
  44. [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  45.   border-color: #141414;
  46.   background: #141414;
  47. }

Tabs标签页 - 图12

自定义新增页签触发器

隐藏默认的页签增加图标，给自定义触发器绑定事件。

  1. import { Tabs, Button } from 'antd';
  3. const { TabPane } = Tabs;
  5. class Demo extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.newTabIndex = 0;
  9.     const panes = [
  10.       { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
  11.       { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
  12.     ];
  13.     this.state = {
  14.       activeKey: panes[0].key,
  15.       panes,
  16.     };
  17.   }
  19.   onChange = activeKey => {
  20.     this.setState({ activeKey });
  21.   };
  23.   onEdit = (targetKey, action) => {
  24.     this[action](targetKey);
  25.   };
  27.   add = () => {
  28.     const { panes } = this.state;
  29.     const activeKey = `newTab${this.newTabIndex++}`;
  30.     panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
  31.     this.setState({ panes, activeKey });
  32.   };
  34.   remove = targetKey => {
  35.     let { activeKey } = this.state;
  36.     let lastIndex;
  37.     this.state.panes.forEach((pane, i) => {
  38.       if (pane.key === targetKey) {
  39.         lastIndex = i - 1;
  40.       }
  41.     });
  42.     const panes = this.state.panes.filter(pane => pane.key !== targetKey);
  43.     if (panes.length && activeKey === targetKey) {
  44.       if (lastIndex >= 0) {
  45.         activeKey = panes[lastIndex].key;
  46.       } else {
  47.         activeKey = panes[0].key;
  48.       }
  49.     }
  50.     this.setState({ panes, activeKey });
  51.   };
  53.   render() {
  54.     return (
  55.       <div>
  56.         <div style={{ marginBottom: 16 }}>
  57.           <Button onClick={this.add}>ADD</Button>
  58.         </div>
  59.         <Tabs
  60.           hideAdd
  61.           onChange={this.onChange}
  62.           activeKey={this.state.activeKey}
  63.           type="editable-card"
  64.           onEdit={this.onEdit}
  65.         >
  66.           {this.state.panes.map(pane => (
  67.             <TabPane tab={pane.title} key={pane.key}>
  68.               {pane.content}
  69.             </TabPane>
  70.           ))}
  71.         </Tabs>
  72.       </div>
  73.     );
  74.   }
  75. }
  77. ReactDOM.render(<Demo />, mountNode);

Tabs标签页 - 图13

自定义页签头

使用 react-sticky 组件实现吸顶效果。

  1. import { Tabs } from 'antd';
  2. import { StickyContainer, Sticky } from 'react-sticky';
  4. const { TabPane } = Tabs;
  6. const renderTabBar = (props, DefaultTabBar) => (
  7.   <Sticky bottomOffset={80}>
  8.     {({ style }) => (
  9.       <DefaultTabBar {...props} className="site-custom-tab-bar" style={{ ...style }} />
  10.     )}
  11.   </Sticky>
  12. );
  14. ReactDOM.render(
  15.   <StickyContainer>
  16.     <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
  17.       <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
  18.         Content of Tab Pane 1
  19.       </TabPane>
  20.       <TabPane tab="Tab 2" key="2">
  21.         Content of Tab Pane 2
  22.       </TabPane>
  23.       <TabPane tab="Tab 3" key="3">
  24.         Content of Tab Pane 3
  25.       </TabPane>
  26.     </Tabs>
  27.   </StickyContainer>,
  28.   mountNode,
  29. );
  1. .site-custom-tab-bar {
  2.   z-index: 1;
  3.   background: #fff;
  4. }

Tabs标签页 - 图14

可拖拽标签

使用 react-dnd 实现标签可拖拽。

  1. import { Tabs } from 'antd';
  2. import { DndProvider, DragSource, DropTarget } from 'react-dnd';
  3. import { HTML5Backend } from 'react-dnd-html5-backend';
  5. const { TabPane } = Tabs;
  7. // Drag & Drop node
  8. class TabNode extends React.Component {
  9.   render() {
  10.     const { connectDragSource, connectDropTarget, children } = this.props;
  12.     return connectDragSource(connectDropTarget(children));
  13.   }
  14. }
  16. const cardTarget = {
  17.   drop(props, monitor) {
  18.     const dragKey = monitor.getItem().index;
  19.     const hoverKey = props.index;
  21.     if (dragKey === hoverKey) {
  22.       return;
  23.     }
  25.     props.moveTabNode(dragKey, hoverKey);
  26.     monitor.getItem().index = hoverKey;
  27.   },
  28. };
  30. const cardSource = {
  31.   beginDrag(props) {
  32.     return {
  33.       id: props.id,
  34.       index: props.index,
  35.     };
  36.   },
  37. };
  39. const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
  40.   connectDropTarget: connect.dropTarget(),
  41. }))(
  42.   DragSource('DND_NODE', cardSource, (connect, monitor) => ({
  43.     connectDragSource: connect.dragSource(),
  44.     isDragging: monitor.isDragging(),
  45.   }))(TabNode),
  46. );
  48. class DraggableTabs extends React.Component {
  49.   state = {
  50.     order: [],
  51.   };
  53.   moveTabNode = (dragKey, hoverKey) => {
  54.     const newOrder = this.state.order.slice();
  55.     const { children } = this.props;
  57.     React.Children.forEach(children, c => {
  58.       if (newOrder.indexOf(c.key) === -1) {
  59.         newOrder.push(c.key);
  60.       }
  61.     });
  63.     const dragIndex = newOrder.indexOf(dragKey);
  64.     const hoverIndex = newOrder.indexOf(hoverKey);
  66.     newOrder.splice(dragIndex, 1);
  67.     newOrder.splice(hoverIndex, 0, dragKey);
  69.     this.setState({
  70.       order: newOrder,
  71.     });
  72.   };
  74.   renderTabBar = (props, DefaultTabBar) => (
  75.     <DefaultTabBar {...props}>
  76.       {node => (
  77.         <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}>
  78.           {node}
  79.         </WrapTabNode>
  80.       )}
  81.     </DefaultTabBar>
  82.   );
  84.   render() {
  85.     const { order } = this.state;
  86.     const { children } = this.props;
  88.     const tabs = [];
  89.     React.Children.forEach(children, c => {
  90.       tabs.push(c);
  91.     });
  93.     const orderTabs = tabs.slice().sort((a, b) => {
  94.       const orderA = order.indexOf(a.key);
  95.       const orderB = order.indexOf(b.key);
  97.       if (orderA !== -1 && orderB !== -1) {
  98.         return orderA - orderB;
  99.       }
  100.       if (orderA !== -1) {
  101.         return -1;
  102.       }
  103.       if (orderB !== -1) {
  104.         return 1;
  105.       }
  107.       const ia = tabs.indexOf(a);
  108.       const ib = tabs.indexOf(b);
  110.       return ia - ib;
  111.     });
  113.     return (
  114.       <DndProvider backend={HTML5Backend}>
  115.         <Tabs renderTabBar={this.renderTabBar} {...this.props}>
  116.           {orderTabs}
  117.         </Tabs>
  118.       </DndProvider>
  119.     );
  120.   }
  121. }
  123. ReactDOM.render(
  124.   <DraggableTabs>
  125.     <TabPane tab="tab 1" key="1">
  126.       Content of Tab Pane 1
  127.     </TabPane>
  128.     <TabPane tab="tab 2" key="2">
  129.       Content of Tab Pane 2
  130.     </TabPane>
  131.     <TabPane tab="tab 3" key="3">
  132.       Content of Tab Pane 3
  133.     </TabPane>
  134.   </DraggableTabs>,
  135.   mountNode,
  136. );

API

Tabs

参数说明类型默认值版本
activeKey当前激活 tab 面板的 keystring-
addIcon自定义添加按钮ReactNode-4.4.0
animated是否使用动画切换 Tabs, 仅生效于 tabPosition=”top”boolean | { inkBar: boolean, tabPane: boolean }{ inkBar: true, tabPane: false }
centered标签居中展示booleanfalse4.4.0
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板
hideAdd是否隐藏加号图标，在 type=”editable-card” 时有效booleanfalse
keyboard开启键盘切换功能booleantrue
renderTabBar替换 TabBar，用于二次封装标签头(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement-
size大小，提供 large default 和 small 三种大小stringdefault
tabBarExtraContenttab bar 上额外的元素ReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0
tabBarGuttertabs 之间的间隙number-
tabBarStyletab bar 的样式对象object-
tabPosition页签位置，可选值有 top right bottom leftstringtop
type页签的基本样式，可选 line、card editable-card 类型stringline
onChange切换面板的回调function(activeKey) {}-
onEdit新增和删除页签的回调，在 type=”editable-card” 时有效(targetKey, action): void-
onTabClicktab 被点击的回调function(key: string, event: MouseEvent)-
onTabScrolltab 滚动时触发function({ direction: left | right | top | bottom })-4.3.0

Tabs.TabPane

参数说明类型默认值
closeIcon自定义关闭图标，在 type=”editable-card”时有效ReactNode-
forceRender被隐藏时是否渲染 DOM 结构booleanfalse
key对应 activeKeystring-
tab选项卡头显示文字ReactNode-