Tabs标签页

选项卡切换组件。

何时使用

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

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

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

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

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

代码演示

Tabs标签页 - 图1

基本

默认选中第一项。

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

Tabs标签页 - 图2

禁用

禁用某一项。

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

Tabs标签页 - 图3

居中

标签居中展示。

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

Tabs标签页 - 图4

图标

有图标的标签。

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

Tabs标签页 - 图5

滑动

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

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

Tabs标签页 - 图6

附加内容

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

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

Tabs标签页 - 图7

大小

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

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

Tabs标签页 - 图8

位置

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

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

Tabs标签页 - 图9

卡片式页签

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

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

Tabs标签页 - 图10

新增和关闭页签

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

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

Tabs标签页 - 图11

卡片式页签容器

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

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

Tabs标签页 - 图13

自定义页签头

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

  1. import { Tabs } from 'antd';
  2. import { StickyContainer, Sticky } from 'react-sticky';
  3. const { TabPane } = Tabs;
  4. const renderTabBar = (props, DefaultTabBar) => (
  5. <Sticky bottomOffset={80}>
  6. {({ style }) => (
  7. <DefaultTabBar {...props} className="site-custom-tab-bar" style={{ ...style }} />
  8. )}
  9. </Sticky>
  10. );
  11. ReactDOM.render(
  12. <StickyContainer>
  13. <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
  14. <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
  15. Content of Tab Pane 1
  16. </TabPane>
  17. <TabPane tab="Tab 2" key="2">
  18. Content of Tab Pane 2
  19. </TabPane>
  20. <TabPane tab="Tab 3" key="3">
  21. Content of Tab Pane 3
  22. </TabPane>
  23. </Tabs>
  24. </StickyContainer>,
  25. mountNode,
  26. );
  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';
  4. const { TabPane } = Tabs;
  5. // Drag & Drop node
  6. class TabNode extends React.Component {
  7. render() {
  8. const { connectDragSource, connectDropTarget, children } = this.props;
  9. return connectDragSource(connectDropTarget(children));
  10. }
  11. }
  12. const cardTarget = {
  13. drop(props, monitor) {
  14. const dragKey = monitor.getItem().index;
  15. const hoverKey = props.index;
  16. if (dragKey === hoverKey) {
  17. return;
  18. }
  19. props.moveTabNode(dragKey, hoverKey);
  20. monitor.getItem().index = hoverKey;
  21. },
  22. };
  23. const cardSource = {
  24. beginDrag(props) {
  25. return {
  26. id: props.id,
  27. index: props.index,
  28. };
  29. },
  30. };
  31. const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
  32. connectDropTarget: connect.dropTarget(),
  33. }))(
  34. DragSource('DND_NODE', cardSource, (connect, monitor) => ({
  35. connectDragSource: connect.dragSource(),
  36. isDragging: monitor.isDragging(),
  37. }))(TabNode),
  38. );
  39. class DraggableTabs extends React.Component {
  40. state = {
  41. order: [],
  42. };
  43. moveTabNode = (dragKey, hoverKey) => {
  44. const newOrder = this.state.order.slice();
  45. const { children } = this.props;
  46. React.Children.forEach(children, c => {
  47. if (newOrder.indexOf(c.key) === -1) {
  48. newOrder.push(c.key);
  49. }
  50. });
  51. const dragIndex = newOrder.indexOf(dragKey);
  52. const hoverIndex = newOrder.indexOf(hoverKey);
  53. newOrder.splice(dragIndex, 1);
  54. newOrder.splice(hoverIndex, 0, dragKey);
  55. this.setState({
  56. order: newOrder,
  57. });
  58. };
  59. renderTabBar = (props, DefaultTabBar) => (
  60. <DefaultTabBar {...props}>
  61. {node => (
  62. <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}>
  63. {node}
  64. </WrapTabNode>
  65. )}
  66. </DefaultTabBar>
  67. );
  68. render() {
  69. const { order } = this.state;
  70. const { children } = this.props;
  71. const tabs = [];
  72. React.Children.forEach(children, c => {
  73. tabs.push(c);
  74. });
  75. const orderTabs = tabs.slice().sort((a, b) => {
  76. const orderA = order.indexOf(a.key);
  77. const orderB = order.indexOf(b.key);
  78. if (orderA !== -1 && orderB !== -1) {
  79. return orderA - orderB;
  80. }
  81. if (orderA !== -1) {
  82. return -1;
  83. }
  84. if (orderB !== -1) {
  85. return 1;
  86. }
  87. const ia = tabs.indexOf(a);
  88. const ib = tabs.indexOf(b);
  89. return ia - ib;
  90. });
  91. return (
  92. <DndProvider backend={HTML5Backend}>
  93. <Tabs renderTabBar={this.renderTabBar} {...this.props}>
  94. {orderTabs}
  95. </Tabs>
  96. </DndProvider>
  97. );
  98. }
  99. }
  100. ReactDOM.render(
  101. <DraggableTabs>
  102. <TabPane tab="tab 1" key="1">
  103. Content of Tab Pane 1
  104. </TabPane>
  105. <TabPane tab="tab 2" key="2">
  106. Content of Tab Pane 2
  107. </TabPane>
  108. <TabPane tab="tab 3" key="3">
  109. Content of Tab Pane 3
  110. </TabPane>
  111. </DraggableTabs>,
  112. mountNode,
  113. );

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 defaultsmall 三种大小stringdefault
tabBarExtraContenttab bar 上额外的元素ReactNode | {left?: ReactNode, right?: ReactNode}-object: 4.6.0
tabBarGuttertabs 之间的间隙number-
tabBarStyletab bar 的样式对象object-
tabPosition页签位置,可选值有 top right bottom leftstringtop
type页签的基本样式,可选 linecard 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-