Tabs 标签页

选项卡切换组件。

何时使用

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

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

  • 卡片式的页签，提供可关闭的样式，常用于容器顶部。
  • 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
  • RadioButton 可作为更次级的页签来使用。

代码演示

基本

默认选中第一项。

Tabs标签页 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. ​
  5. const TabPane = Tabs.TabPane;
  6. ​
  7. function callback(key) {
  8.   console.log(key);
  9. }
  10. ​
  11. ReactDOM.render(
  12.   <Tabs defaultActiveKey="1" onChange={callback}>
  13.     <TabPane tab="Tab 1" key="1">
  14.       Content of Tab Pane 1
  15.     </TabPane>
  16.     <TabPane tab="Tab 2" key="2">
  17.       Content of Tab Pane 2
  18.     </TabPane>
  19.     <TabPane tab="Tab 3" key="3">
  20.       Content of Tab Pane 3
  21.     </TabPane>
  22.   </Tabs>,
  23.   document.getElementById('container'),
  24. );
  25. ​

禁用

禁用某一项。

Tabs标签页 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. ​
  5. const TabPane = Tabs.TabPane;
  6. ​
  7. ReactDOM.render(
  8.   <Tabs defaultActiveKey="1">
  9.     <TabPane tab="Tab 1" key="1">
  10.       Tab 1
  11.     </TabPane>
  12.     <TabPane tab="Tab 2" disabled key="2">
  13.       Tab 2
  14.     </TabPane>
  15.     <TabPane tab="Tab 3" key="3">
  16.       Tab 3
  17.     </TabPane>
  18.   </Tabs>,
  19.   document.getElementById('container'),
  20. );
  21. ​

图标

有图标的标签。

Tabs标签页 - 图3

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

滑动

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

Tabs标签页 - 图4

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Tabs, Radio } from 'choerodon-ui';
  5. ​
  6. const TabPane = Tabs.TabPane;
  7. ​
  8. class SlidingTabsDemo extends React.Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {
  12.       mode: 'top',
  13.     };
  14.   }
  15. ​
  16.   handleModeChange = e => {
  17.     const mode = e.target.value;
  18.     this.setState({ mode });
  19.   };
  20. ​
  21.   render() {
  22.     const { mode } = this.state;
  23.     return (
  24.       <div>
  25.         <Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
  26.           <Radio.Button value="top">Horizontal</Radio.Button>
  27.           <Radio.Button value="left">Vertical</Radio.Button>
  28.         </Radio.Group>
  29.         <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
  30.           <TabPane tab="Tab 1" key="1">
  31.             Content of tab 1
  32.           </TabPane>
  33.           <TabPane tab="Tab 2" key="2">
  34.             Content of tab 2
  35.           </TabPane>
  36.           <TabPane tab="Tab 3" key="3">
  37.             Content of tab 3
  38.           </TabPane>
  39.           <TabPane tab="Tab 4" key="4">
  40.             Content of tab 4
  41.           </TabPane>

附加内容

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

Tabs标签页 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs, Button } from 'choerodon-ui';
  4. ​
  5. const TabPane = Tabs.TabPane;
  6. ​
  7. const operations = <Button>Extra Action</Button>;
  8. ​
  9. ReactDOM.render(
  10.   <Tabs tabBarExtraContent={operations}>
  11.     <TabPane tab="Tab 1" key="1">
  12.       Content of tab 1
  13.     </TabPane>
  14.     <TabPane tab="Tab 2" key="2">
  15.       Content of tab 2
  16.     </TabPane>
  17.     <TabPane tab="Tab 3" key="3">
  18.       Content of tab 3
  19.     </TabPane>
  20.   </Tabs>,
  21.   document.getElementById('container'),
  22. );
  23. ​

大小

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

Tabs标签页 - 图6

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

位置

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

Tabs标签页 - 图7

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

卡片式页签

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

Tabs标签页 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. ​
  5. const TabPane = Tabs.TabPane;
  6. ​
  7. function callback(key) {
  8.   console.log(key);
  9. }
  10. ​
  11. ReactDOM.render(
  12.   <Tabs onChange={callback} type="card">
  13.     <TabPane tab="Tab 1" key="1">
  14.       Content of Tab Pane 1
  15.     </TabPane>
  16.     <TabPane tab="Tab 2" key="2">
  17.       Content of Tab Pane 2
  18.     </TabPane>
  19.     <TabPane tab="Tab 3" key="3">
  20.       Content of Tab Pane 3
  21.     </TabPane>
  22.   </Tabs>,
  23.   document.getElementById('container'),
  24. );
  25. ​

新增和关闭页签

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

Tabs标签页 - 图9

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Tabs } from 'choerodon-ui';
  5. ​
  6. const TabPane = Tabs.TabPane;
  7. ​
  8. class Demo extends React.Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.newTabIndex = 0;
  12.     const panes = [
  13.       { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
  14.       { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
  15.       { title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },
  16.     ];
  17.     this.state = {
  18.       activeKey: panes[0].key,
  19.       panes,
  20.     };
  21.   }
  22. ​
  23.   onChange = activeKey => {
  24.     this.setState({ activeKey });
  25.   };
  26. ​
  27.   onEdit = (targetKey, action) => {
  28.     this[action](targetKey);
  29.   };
  30. ​
  31.   add = () => {
  32.     const panes = this.state.panes;

卡片式页签容器

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

Tabs标签页 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. ​
  5. const TabPane = Tabs.TabPane;
  6. ​
  7. ReactDOM.render(
  8.   <div className="card-container">
  9.     <Tabs type="card">
  10.       <TabPane tab="Tab Title 1" key="1">
  11.         <p>Content of Tab Pane 1</p>
  12.         <p>Content of Tab Pane 1</p>
  13.         <p>Content of Tab Pane 1</p>
  14.       </TabPane>
  15.       <TabPane tab="Tab Title 2" key="2">
  16.         <p>Content of Tab Pane 2</p>
  17.         <p>Content of Tab Pane 2</p>
  18.         <p>Content of Tab Pane 2</p>
  19.       </TabPane>
  20.       <TabPane tab="Tab Title 3" key="3">
  21.         <p>Content of Tab Pane 3</p>
  22.         <p>Content of Tab Pane 3</p>
  23.         <p>Content of Tab Pane 3</p>
  24.       </TabPane>
  25.     </Tabs>
  26.   </div>,
  27.   document.getElementById('container'),
  28. );
  29. ​

自定义新增页签触发器

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

Tabs标签页 - 图11

  1. ​
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { Tabs, Button } from 'choerodon-ui';
  5. ​
  6. const TabPane = Tabs.TabPane;
  7. ​
  8. class Demo extends React.Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.newTabIndex = 0;
  12.     const panes = [
  13.       { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
  14.       { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
  15.     ];
  16.     this.state = {
  17.       activeKey: panes[0].key,
  18.       panes,
  19.     };
  20.   }
  21. ​
  22.   onChange = activeKey => {
  23.     this.setState({ activeKey });
  24.   };
  25. ​
  26.   onEdit = (targetKey, action) => {
  27.     this[action](targetKey);
  28.   };
  29. ​
  30.   add = () => {
  31.     const panes = this.state.panes;
  32.     const activeKey = `newTab${this.newTabIndex++}`;

API

Tabs

参数说明类型默认值
activeKey当前激活 tab 面板的 keystring无
animated是否使用动画切换 Tabs，在 tabPosition=top|bottom 时有效boolean | {inkBar:boolean, tabPane:boolean}true, 当 type=”card” 时为 false
defaultActiveKey初始化选中面板的 key，如果没有设置 activeKeystring第一个面板
hideAdd是否隐藏加号图标，在 type=”editable-card” 时有效booleanfalse
size大小，提供 large default 和 small 三种大小string‘default’
tabBarExtraContenttab bar 上额外的元素React.ReactNode无
tabBarStyletab bar 的样式对象object-
tabPosition页签位置，可选值有 top right bottom leftstring‘top’
type页签的基本样式，可选 line、card editable-card 类型string‘line’
onChange切换面板的回调(newActiveKey, oldActiveKey) => void无
onEdit新增和删除页签的回调，在 type=”editable-card” 时有效(targetKey, action): void无
onNextClicknext 按钮被点击的回调(e) => void无
onPrevClickprev 按钮被点击的回调(e) => void无
onTabClicktab 被点击的回调(tabKey) => void无
tabBarGuttertabs 之间的间隙number无

Tabs.TabPane

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