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. const TabPane = Tabs.TabPane;
  5. function callback(key) {
  6. console.log(key);
  7. }
  8. ReactDOM.render(
  9. <Tabs defaultActiveKey="1" onChange={callback}>
  10. <TabPane tab="Tab 1" key="1">
  11. Content of Tab Pane 1
  12. </TabPane>
  13. <TabPane tab="Tab 2" key="2">
  14. Content of Tab Pane 2
  15. </TabPane>
  16. <TabPane tab="Tab 3" key="3">
  17. Content of Tab Pane 3
  18. </TabPane>
  19. </Tabs>,
  20. document.getElementById('container'),
  21. );

禁用

禁用某一项。

Tabs标签页 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. 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. document.getElementById('container'),
  18. );

图标

有图标的标签。

Tabs标签页 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs, Icon } from 'choerodon-ui';
  4. 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>,

滑动

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

Tabs标签页 - 图4

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

附加内容

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

Tabs标签页 - 图5

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

大小

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

Tabs标签页 - 图6

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

位置

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

Tabs标签页 - 图7

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

新增和关闭页签

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

Tabs标签页 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. 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 1', key: '1' },
  11. { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
  12. { title: 'Tab 3', content: 'Content of Tab 3', key: '3', closable: false },
  13. ];
  14. this.state = {
  15. activeKey: panes[0].key,
  16. panes,
  17. };
  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.panes;

卡片式页签容器

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

Tabs标签页 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs } from 'choerodon-ui';
  4. 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. document.getElementById('container'),
  26. );

自定义新增页签触发器

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

Tabs标签页 - 图11

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tabs, Button } from 'choerodon-ui';
  4. 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. }
  18. onChange = activeKey => {
  19. this.setState({ activeKey });
  20. };
  21. onEdit = (targetKey, action) => {
  22. this[action](targetKey);
  23. };
  24. add = () => {
  25. const panes = this.state.panes;
  26. 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 defaultsmall 三种大小string‘default’
tabBarExtraContenttab bar 上额外的元素React.ReactNode
tabBarStyletab bar 的样式对象object-
tabPosition页签位置,可选值有 top right bottom leftstring‘top’
type页签的基本样式,可选 linecard 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