Tabs标签页

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

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

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

    • 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。

    • RadioButton 可作为更次级的页签来使用。

    默认选中第一项。

    Tabs 标签页 - 图2

    禁用

    禁用某一项。

    3. const TabPane = Tabs.TabPane;
    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. );

    有图标的标签。

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

    滑动

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

    1. import { Tabs, Radio } from 'antd';
    3. const TabPane = Tabs.TabPane;
    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.           <TabPane tab="Tab 1" key="1">
    28.             Content of tab 1
    29.           </TabPane>
    30.           <TabPane tab="Tab 2" key="2">
    31.             Content of tab 2
    32.           </TabPane>
    33.           <TabPane tab="Tab 3" key="3">
    34.             Content of tab 3
    35.           </TabPane>
    36.           <TabPane tab="Tab 4" key="4">
    37.             Content of tab 4
    38.           </TabPane>
    39.           <TabPane tab="Tab 5" key="5">
    40.             Content of tab 5
    41.           </TabPane>
    42.           <TabPane tab="Tab 6" key="6">
    43.             Content of tab 6
    44.           </TabPane>
    45.           <TabPane tab="Tab 7" key="7">
    46.             Content of tab 7
    47.           </TabPane>
    48.           <TabPane tab="Tab 8" key="8">
    49.             Content of tab 8
    50.           </TabPane>
    51.           <TabPane tab="Tab 9" key="9">
    52.             Content of tab 9
    53.           </TabPane>
    54.           <TabPane tab="Tab 10" key="10">
    55.             Content of tab 10
    56.           </TabPane>
    57.           <TabPane tab="Tab 11" key="11">
    58.             Content of tab 11
    59.           </TabPane>
    60.         </Tabs>
    61.       </div>
    62.     );
    63.   }
    64. }
    66. ReactDOM.render(<SlidingTabsDemo />, mountNode);

    Tabs 标签页 - 图5

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

    大小

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

    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}>
    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.       </div>
    33.     );
    34.   }
    35. }
    37. ReactDOM.render(<Demo />, mountNode);

    Tabs 标签页 - 图7

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

    1. import { Tabs, Select } from 'antd';
    3. const TabPane = Tabs.TabPane;
    5. class Demo extends React.Component {
    6.   state = {
    7.     tabPosition: 'top',
    8.   };
    10.   changeTabPosition = tabPosition => {
    11.     this.setState({ tabPosition });
    12.   };
    14.   render() {
    15.     return (
    16.       <div>
    17.         <div style={{ marginBottom: 16 }}>
    18.           Tab position：
    19.           <Select
    20.             value={this.state.tabPosition}
    21.             onChange={this.changeTabPosition}
    22.             dropdownMatchSelectWidth={false}
    23.           >
    24.             <Option value="top">top</Option>
    25.             <Option value="bottom">bottom</Option>
    26.             <Option value="left">left</Option>
    27.             <Option value="right">right</Option>
    28.           </Select>
    29.         </div>
    30.         <Tabs tabPosition={this.state.tabPosition}>
    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.       </div>
    42.     );
    43.   }
    44. }
    46. ReactDOM.render(<Demo />, mountNode);

    卡片式页签

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

    1. import { Tabs } from 'antd';
    3. const TabPane = Tabs.TabPane;
    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. );

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

    Tabs 标签页 - 图10

    卡片式页签容器

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

    1. import { Tabs } from 'antd';
    3. const TabPane = Tabs.TabPane;
    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 > .ant-tabs-card > .ant-tabs-content {
    2.   height: 120px;
    3.   margin-top: -16px;
    4. }
    6. .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
    7.   background: #fff;
    8.   padding: 16px;
    9. }
    11. .card-container > .ant-tabs-card > .ant-tabs-bar {
    12.   border-color: #fff;
    13. }
    15. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
    16.   border-color: transparent;
    17.   background: transparent;
    18. }
    20. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
    21.   border-color: #fff;
    22.   background: #fff;
    23. }

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

    1. import { Tabs, Button } from 'antd';
    3. const TabPane = Tabs.TabPane;
    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.panes;
    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.activeKey;
    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.   };
    52.   render() {
    53.     return (
    54.       <div>
    55.         <div style={{ marginBottom: 16 }}>
    56.           <Button onClick={this.add}>ADD</Button>
    57.         </div>
    58.         <Tabs
    59.           hideAdd
    61.           activeKey={this.state.activeKey}
    62.           type="editable-card"
    63.           onEdit={this.onEdit}
    64.         >
    65.           {this.state.panes.map(pane => (
    66.             <TabPane tab={pane.title} key={pane.key}>
    67.               {pane.content}
    68.             </TabPane>
    69.           ))}
    70.         </Tabs>
    71.       </div>
    72.     );
    73.   }
    74. }
    76. ReactDOM.render(<Demo />, mountNode);

    Tabs 标签页 - 图12

    自定义页签头

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

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

    1. import { Tabs } from 'antd';
    2. import { DragDropContextProvider, DragSource, DropTarget } from 'react-dnd';
    3. import HTML5Backend from 'react-dnd-html5-backend';
    5. const TabPane = Tabs.TabPane;
    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.       <DragDropContextProvider backend={HTML5Backend}>
    115.         <Tabs renderTabBar={this.renderTabBar} {...this.props}>
    116.           {orderTabs}
    117.         </Tabs>
    118.       </DragDropContextProvider>
    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. );

    Tabs.TabPane

    参数说明类型默认值
    forceRender被隐藏时是否渲染 DOM 结构booleanfalse
    key对应 activeKeystring无
    tab选项卡头显示文字string|ReactNode无