Tab 选项卡

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

TAB 让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用，是全局功能的主要展示和切换区域，一个TAB标记一个核心功能，TAB之间可以快速点击切换。该窗口包含2个以上的选项卡，所有选项卡可以排列在一行中，即使该用户界面被本地化后也是如此。提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

何时使用

Fusion 提供了三级选项卡，分别用于不同的场景。

  • 普通选项卡，引领整页面的内容，起导航的作用。

  • 文本型选项卡。

  • 包裹型选项卡，在页面结构中，只是局部展示，需要和其他内容结合出现。

  • 胶囊型选项卡。

关于动效

如果您不想开启动效，可以通过设置 animation 属性值为 false 来关闭。

注意事项

对于 0.x 版本的 Tab 组件而言，在实现上使用了 key 作为内部标识字段，如果用户使用了 React 官方提供的类似于 React.Children.toArray 等子元素遍历方法时，会导致原始的 key 值被修改，这一行为会导致部分逻辑出错（判断当前激活的 TabPane）。为了保证兼容性，我们将会在 1.x 版本进行变更。如果你需要用到 React.Children.toArray 方法，可以使用 @alife/next-util 中提供的 children.toArray 方法。

API

选项卡

参数说明类型默认值
prefix样式前缀String'next-'
activeKey被激活的选项卡的 key（受控）Number/String-
defaultActiveKey初始化时被激活的选项卡的 key（非受控）Number/String-
type类型可选值:'bar', 'wrapped', 'text', 'capsule'Enum'bar'
animation是否开启动效Booleantrue
resDirection多余项的展现方向可选值:'horizontal', 'vertical'Enum'horizontal'
tabPosition导航选项卡的位置，只适用于包裹型（wrapped）选项卡可选值:'top', 'bottom', 'left', 'right'Enum'top'
size尺寸可选值:'small', 'medium'Enum'medium'
closeable是否可关闭选项卡，只支持 bar 和 wrapped 两种类型Booleanfalse
triggerType触发选项卡的方式可选值:'hover', 'click'Enum'click'
lazyLoad是否提前渲染好所有 TabPane 的内容Booleantrue
navStyle导航条的附加样式Object{}
contentStyle内容区的附加样式Object{}
tabBarExtraContent导航栏附加内容ReactNodenull
onChange选项卡发生切换时的事件回调签名:Function(key: String) => void参数:key: {String} 改变后的 keyFunction() => {}
onClose选项卡被关闭时的事件回调签名:Function(key: String, event: Object) => void参数:key: {String} 关闭的选项卡的 keyevent: {Object} Event 对象Function() => {}

Tab.TabPane

参数说明类型默认值
tab选项卡标题any-
closeable单个选项卡是否可关闭Booleantrue
tabStyle单个选项卡的补充样式Object-
tabClassName单个选项卡的附加样式类String-
onClick点击单个选项卡时触发的回调签名:Function(key: String) => void参数:key: {String} 选项卡的 keyFunction() => {}
onMouseEnter鼠标进入时触发的回调签名:Function(key: String) => void参数:key: {String} 选项卡的 keyFunction() => {}
onMouseLeave鼠标离开时出发的回调签名:Function(key: String) => void参数:key: {String} 选项卡的 keyFunction() => {}

代码示例

简单用法

请务必给每个 TabPane 传入一个 key 值作为每个 TabPane 的唯一标识字段。创建一个基本的选项卡，其默认类型为bar，并默认选中第一项。

Tab 选项卡 - 图1

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const tabs = [
  6.   { tab: "首页", key: "home", content: "这里是首页内容" },
  7.   { tab: "文档", key: "doc", content: "这里是文档内容" },
  8.   { tab: "API", key: "api", content: "这里是 API 内容" }
  9. ];
  11. function handleChange(key) {
  12.   console.log("change", key);
  13. }
  15. function handleClick(key) {
  16.   console.log("click", key);
  17. }
  19. ReactDOM.render(
  20.   <Tab onChange={handleChange}>
  21.     {tabs.map(item => (
  22.       <TabPane key={item.key} tab={item.tab} onClick={handleClick}>
  23.         {item.content}
  24.       </TabPane>
  25.     ))}
  26.   </Tab>,
  27.   mountNode
  28. );

可关闭选项卡

此外用户还可以单独在单个 TabPane 上设置是否可关闭的属性。可关闭选项卡，可以通过控制 closable 属性设置选项卡是否可关闭。处于视觉上的考虑，目前该属性只支持包裹型选项卡（wrapped）和普通选项卡（bar）。

Tab 选项卡 - 图2

查看源码在线预览

  1. import { Tab, Button, Icon } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const panes = [
  6.   { tab: "邮件", key: 1, closeable: false },
  7.   { tab: "消息通知", key: 2 },
  8.   { tab: "设置", key: 3 },
  9.   { tab: "未读邮件", key: 4 }
  10. ];
  12. class CloseableTab extends React.Component {
  13.   constructor(props) {
  14.     super(props);
  15.     this.state = {
  16.       panes: panes,
  17.       activeKey: panes[0].key
  18.     };
  19.   }
  21.   /*eslint-disable eqeqeq */
  22.   remove(targetKey) {
  23.     let activeKey = this.state.activeKey;
  24.     let lastIndex;
  25.     this.state.panes.forEach((item, i) => {
  26.       if (item.key == targetKey) {
  27.         lastIndex = i - 1;
  28.       }
  29.     });
  30.     const panes = this.state.panes.filter(pane => pane.key != targetKey);
  31.     if (lastIndex >= 0 && activeKey == targetKey) {
  32.       activeKey = panes[lastIndex].key;
  33.     }
  34.     this.setState({ panes, activeKey });
  35.   }
  37.   onClose(targetKey) {
  38.     this.remove(targetKey);
  39.   }
  41.   onChange(activeKey) {
  42.     this.setState({ activeKey });
  43.   }
  45.   addTabpane() {
  46.     this.setState(prevState => {
  47.       const { panes } = prevState;
  48.       panes.push({ tab: "new tab", key: Math.random() });
  49.       return { panes };
  50.     });
  51.   }
  53.   render() {
  54.     const state = this.state;
  55.     return (
  56.       <div>
  57.         <Button onClick={::this.addTabpane}>
  58.           <Icon type="add" /> 新建选项卡
  59.         </Button>
  61.         <Tab
  62.           type="wrapped"
  63.           activeKey={state.activeKey}
  64.           closeable
  65.           onChange={::this.onChange}
  66.           onClose={::this.onClose}
  67.           className="custom-tab"
  68.         >
  69.           {state.panes.map(item => (
  70.             <TabPane tab={item.tab} key={item.key} closeable={item.closeable}>
  71.               {item.tab}的内容区域
  72.             </TabPane>
  73.           ))}
  74.         </Tab>
  75.       </div>
  76.     );
  77.   }
  78. }
  80. ReactDOM.render(<CloseableTab />, mountNode);
  1. .custom-tab {
  2.     margin-top: 14px;
  3. }

自定义样式

此外，某些场合下，用户可能需要在某些特定的 tab 上添加样式，为此可以在 TabPane 上使用 tabClassName 和 tabStyle 来控制。如果需要定制导航条的样式，可以通过 navStyle 属性进行设置。如果需要定制内容区的样式，可以通过 contentStyle 属性进行设置。Tab 提供了丰富的属性让用户自定义组件的默认样式。

Tab 选项卡 - 图3

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const panes = [
  6.   {
  7.     tab: "未处理任务",
  8.     key: 0
  9.   },
  10.   {
  11.     tab: "已处理任务",
  12.     key: 1
  13.   },
  14.   {
  15.     tab: "未处理消息",
  16.     key: 2
  17.   },
  18.   {
  19.     tab: "已处理消息",
  20.     key: 3
  21.   },
  22.   {
  23.     tab: "过期消息",
  24.     key: 4
  25.   }
  26. ];
  28. const detachedContentStyle = {
  29.   borderLeft: 0,
  30.   borderRight: 0,
  31.   borderBottom: 0
  32. };
  34. ReactDOM.render(
  35.   <div className="fusion-demo">
  36.     <div className="demo-item-title">
  37.       通过 contentStyle 属性移除内容区默认边框
  38.     </div>
  39.     <Tab type="wrapped" contentStyle={detachedContentStyle}>
  40.       {panes.map(pane => (
  41.         <TabPane tab={pane.tab} key={pane.key}>
  42.           {pane.tab}
  43.         </TabPane>
  44.       ))}
  45.     </Tab>
  47.     <div className="demo-item-title">
  48.       搭配使用 contentStyle, navStyle, tabClassName, tabStyle 等自定义样式属性
  49.     </div>
  50.     <Tab
  51.       type="wrapped"
  52.       contentStyle={{ padding: 0 }}
  53.       navStyle={{ background: "#FFF0E6" }}
  54.     >
  55.       {panes.map(pane => {
  56.         return (
  57.           <TabPane
  58.             tab={pane.tab}
  59.             key={pane.key}
  60.             className="custom-content"
  61.             tabStyle={{ background: "#FFF" }}
  62.             tabClassName="custom-tabs-tab"
  63.           >
  64.             {pane.tab}
  65.           </TabPane>
  66.         );
  67.       })}
  68.     </Tab>
  70.     <div className="demo-item-title">利用 tabClassName 实现等宽导航</div>
  71.     <Tab type="capsule">
  72.       {panes.map(pane => (
  73.         <TabPane tab={pane.tab} key={pane.key} tabClassName="justify-tabs-tab">
  74.           {pane.tab}
  75.         </TabPane>
  76.       ))}
  77.     </Tab>
  78.   </div>,
  79.   mountNode
  80. );
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     background: #eee;
  4.     color: #333;
  5.     padding: 8px;
  6.     margin: 14px 0;
  7.     text-align: center;
  8. }
  10. .custom-content {
  11.     color: #333;
  12.     padding: 15px;
  13. }
  15. .custom-tabs-tab {
  16.     margin-right: -1px !important;
  17. }
  19. .justify-tabs-tab {
  20.     width: 140px;
  21.     text-align: center;
  22. }

自定义选项卡

除了使用简单文本作为选项卡的标题，用户还可以传入自定义组件作为标题。

Tab 选项卡 - 图4

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const complexTab1 = (
  6.   <div className="custom-tab-wrapper">
  7.     <p className="tab-title">e-Checking</p>
  8.     <p className="tab-desc">Transaction fee: US $15</p>
  9.   </div>
  10. );
  12. const complexTab2 = (
  13.   <div className="custom-tab-wrapper">
  14.     <p className="tab-title">Bank Card</p>
  15.     <p className="tab-desc">Transaction fee: US $26</p>
  16.   </div>
  17. );
  19. const panes = [
  20.   {
  21.     tab: complexTab1,
  22.     key: 0
  23.   },
  24.   {
  25.     tab: complexTab2,
  26.     key: 1
  27.   }
  28. ];
  30. function callback(key) {
  31.   console.log(key);
  32. }
  34. ReactDOM.render(
  35.   <Tab onChange={callback} type="wrapped">
  36.     {panes.map(pane => (
  37.       <TabPane tab={pane.tab} key={pane.key} tabStyle={{ height: "60px" }}>
  38.         {pane.tab}
  39.       </TabPane>
  40.     ))}
  41.   </Tab>,
  42.   mountNode
  43. );
  1. .custom-tab-wrapper {
  2.     line-height: 16px;
  3. }
  5. .tab-title {
  6.     margin: 10px 0 0 0;
  7.     font-size: 16px;
  8. }
  9. .tab-desc {
  10.     margin: 10px 0 0 0;
  11.     font-size: 12px;
  12. }

禁用

可以通过 disabled 属性禁用某一个选型卡。

Tab 选项卡 - 图5

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. ReactDOM.render(
  6.   <Tab>
  7.     <TabPane tab="选项卡一" key="1">
  8.       选项卡一
  9.     </TabPane>
  10.     <TabPane tab="选项卡二" disabled key="2">
  11.       选项卡二
  12.     </TabPane>
  13.     <TabPane tab="选项卡三" key="3">
  14.       选项卡三
  15.     </TabPane>
  16.   </Tab>,
  17.   mountNode
  18. );

可编辑的 Tab

此时用户只要传入自定义组件给 TabPane 即可，Tab 可以将底层事件对象传递给用户的自定义组件。Tab 允许开发者在上层进行自由的行为控制，例如用户可以基于 Tab 开发一个标题部分双击可编辑的 Tab ，

Tab 选项卡 - 图6

查看源码在线预览

  1. import { Tab, Input } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. class EditableTabPane extends React.Component {
  6.   static propTypes = {
  7.     defaultTitle: React.PropTypes.string
  8.   };
  10.   constructor(props) {
  11.     super(props);
  12.     this.state = {
  13.       tabTitle: props.defaultTitle,
  14.       editable: false
  15.     };
  16.   }
  18.   componentWillReceiveProps(nextProps) {
  19.     if (nextProps.defaultTitle !== this.state.tabTitle) {
  20.       this.setState({
  21.         tabTitle: nextProps.defaultTitle
  22.       });
  23.     }
  24.   }
  26.   onKeyDown(e) {
  27.     const { keyCode } = e;
  28.     // 由于 Tab 会监听键盘的 keyUp, keyDown, keyLeft, keyRight 四个按键用于支持键盘导航
  29.     // 如果上层需要使用到键盘事件，需要在这里停止事件冒泡
  30.     if (keyCode > 36 && keyCode < 41) {
  31.       e.stopPropagation();
  32.     }
  33.   }
  35.   onBlur(e) {
  36.     this.setState({
  37.       editable: false,
  38.       tabTitle: e.target.value
  39.     });
  40.   }
  42.   onDblClick() {
  43.     this.setState({
  44.       editable: true
  45.     });
  46.   }
  48.   render() {
  49.     const { tabTitle, editable } = this.state;
  50.     if (editable) {
  51.       return (
  52.         <Input
  53.           defaultValue={tabTitle}
  54.           onKeyDown={this.onKeyDown.bind(this)}
  55.           onBlur={this.onBlur.bind(this)}
  56.         />
  57.       );
  58.     }
  59.     return <span onDoubleClick={this.onDblClick.bind(this)}>{tabTitle}</span>;
  60.   }
  61. }
  63. ReactDOM.render(
  64.   <Tab defaultActiveKey="1">
  65.     <TabPane tab={<EditableTabPane defaultTitle="选项卡一" />} key="1">
  66.       选项卡一
  67.     </TabPane>
  68.     <TabPane tab="选项卡二" key="2">
  69.       选项卡二
  70.     </TabPane>
  71.   </Tab>,
  72.   mountNode
  73. );

附加额外内容

可以通过设置 tabBarExtraContent 为 Tab 组件附加额外的内容，确保只在有限选项卡的情况下才使用附加内容。

Tab 选项卡 - 图7

查看源码在线预览

  1. import { Tab, Button } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. function handleChange(key) {
  6.   console.log(key);
  7. }
  9. function handleClick() {
  10.   console.log("hello world");
  11. }
  13. const extraContent = (
  14.   <Button type="primary" onClick={handleClick}>
  15.     Hello world
  16.   </Button>
  17. );
  19. ReactDOM.render(
  20.   <div className="fusion-demo">
  21.     <div className="demo-item-title">水平方向加 tabBarExtraContent</div>
  22.     <Tab
  23.       type="wrapped"
  24.       onChange={handleChange}
  25.       tabBarExtraContent={extraContent}
  26.     >
  27.       <TabPane tab="选项卡一" key="1">
  28.         选项卡一内容
  29.       </TabPane>
  30.       <TabPane tab="选项卡二" key="2">
  31.         选项卡二内容
  32.       </TabPane>
  33.       <TabPane tab="选项卡三" key="3">
  34.         选项卡三内容
  35.       </TabPane>
  36.     </Tab>
  38.     <div className="demo-item-title">垂直方向加 tabBarExtraContent</div>
  39.     <Tab
  40.       type="wrapped"
  41.       tabPosition="left"
  42.       onChange={handleChange}
  43.       tabBarExtraContent={extraContent}
  44.     >
  45.       <TabPane tab="选项卡一" key="1">
  46.         选项卡一内容
  47.       </TabPane>
  48.       <TabPane tab="选项卡二" key="2">
  49.         选项卡二内容
  50.       </TabPane>
  51.       <TabPane tab="选项卡三" key="3">
  52.         选项卡三内容
  53.       </TabPane>
  54.     </Tab>
  55.   </div>,
  56.   mountNode
  57. );
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     background: #eee;
  4.     color: #333;
  5.     padding: 8px;
  6.     margin: 14px 0;
  7.     text-align: center;
  8. }

关闭 Lazyload

如果您需要在某些时候提前渲染好所有的 Content 内容，可以使用在 Tab 上关闭 lazyLoad 属性。默认情况 Tab 不会提前渲染好所有的内容，而是根据 Tab 的激活情况依次渲染。

Tab 选项卡 - 图8

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const tabs = [
  6.   { tab: "首页", key: 0, content: "这里是首页内容" },
  7.   { tab: "文档", key: 1, content: "这里是文档内容" },
  8.   { tab: "API", key: 2, content: "这里是 API 内容" }
  9. ];
  11. ReactDOM.render(
  12.   <Tab lazyLoad={false}>
  13.     {tabs.map(item => (
  14.       <TabPane key={item.key} tab={item.tab}>
  15.         {item.content}
  16.       </TabPane>
  17.     ))}
  18.   </Tab>,
  19.   mountNode
  20. );

选项卡嵌套

可以将不同类型的选项卡进行嵌套

Tab 选项卡 - 图9

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. function callback(key) {
  6.   console.log(key);
  7. }
  9. ReactDOM.render(
  10.   <Tab onChange={callback} type="wrapped">
  11.     <TabPane tab="选项卡一" key="1">
  12.       <Tab type="wrapped">
  13.         <TabPane tab="1-1" key="11">
  14.           1-1
  15.         </TabPane>
  16.         <TabPane tab="1-2" key="12">
  17.           1-2
  18.         </TabPane>
  19.         <TabPane tab="1-3" key="13">
  20.           1-3
  21.         </TabPane>
  22.       </Tab>
  23.     </TabPane>
  24.     <TabPane tab="选项卡二" key="2">
  25.       <Tab type="bar">
  26.         <TabPane tab="2-1" key="21">
  27.           2-1
  28.         </TabPane>
  29.         <TabPane tab="2-2" key="22">
  30.           2-2
  31.         </TabPane>
  32.         <TabPane tab="3-3" key="23">
  33.           2-3
  34.         </TabPane>
  35.       </Tab>
  36.     </TabPane>
  37.     <TabPane tab="选项卡三" key="3">
  38.       <Tab type="capsule">
  39.         <TabPane tab="3-1" key="31">
  40.           3-1
  41.         </TabPane>
  42.         <TabPane tab="3-2" key="32">
  43.           3-2
  44.         </TabPane>
  45.         <TabPane tab="3-3" key="33">
  46.           3-3
  47.         </TabPane>
  48.       </Tab>
  49.     </TabPane>
  50.     <TabPane tab="选项卡三" key="4">
  51.       <Tab type="text">
  52.         <TabPane tab="4-1" key="41">
  53.           4-1
  54.         </TabPane>
  55.         <TabPane tab="4-2" key="42">
  56.           4-2
  57.         </TabPane>
  58.         <TabPane tab="4-3" key="43">
  59.           4-3
  60.         </TabPane>
  61.       </Tab>
  62.     </TabPane>
  63.   </Tab>,
  64.   mountNode
  65. );

位置

内容区的高度将会被自动附加一个 min-height 值，该值为导航条的高度。需要注意的是，当 tabPosition="left|right" 时，并且用户没有通过 contentStyle 属性自定义内容区的最小高度时，有四个位置，tabPosition="left|right|top|bottom"。对于包裹型（type 值为 wrapped）选项卡，支持通过 tabPosition 来指定选项卡标签的位置。

Tab 选项卡 - 图10

查看源码在线预览

  1. import { Select, Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const contentStyle = {
  6.   background: "#FFF"
  7. };
  9. class Demo extends React.Component {
  10.   constructor(props) {
  11.     super(props);
  12.     this.state = {
  13.       tabPosition: "bottom"
  14.     };
  15.   }
  17.   changeTabPosition(value) {
  18.     this.setState({ tabPosition: value });
  19.   }
  21.   render() {
  22.     return (
  23.       <div>
  24.         <Select
  25.           value={this.state.tabPosition}
  26.           onChange={::this.changeTabPosition}
  27.           className="tab-select-demo"
  28.         >
  29.           <div value="top">top</div>
  30.           <div value="bottom">bottom</div>
  31.           <div value="left">left</div>
  32.           <div value="right">right</div>
  33.         </Select>
  35.         <Tab
  36.           tabPosition={this.state.tabPosition}
  37.           type="wrapped"
  38.           contentStyle={contentStyle}
  39.         >
  40.           <TabPane tab="选项卡一" key="1">
  41.             选项卡一内容
  42.           </TabPane>
  43.           <TabPane tab="选项卡二" key="2">
  44.             选项卡二内容
  45.           </TabPane>
  46.           <TabPane tab="选项卡三" key="3">
  47.             选项卡三内容
  48.           </TabPane>
  49.         </Tab>
  50.       </div>
  51.     );
  52.   }
  53. }
  55. ReactDOM.render(<Demo />, mountNode);
  1. .tab-select-demo {
  2.     margin-bottom: 20px;
  3. }

尺寸

small尺寸的选项卡组件可以用在弹出框等较狭窄的容器内。组件尺寸，可以通过size属性设置，提供medium(默认)和small两种尺寸，

Tab 选项卡 - 图11

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const tabs = [
  6.   { tab: "首页", key: "home", content: "这里是首页内容" },
  7.   { tab: "文档", key: "doc", content: "这里是文档内容" },
  8.   { tab: "API", key: "api", content: "这里是 API 内容" }
  9. ];
  11. ReactDOM.render(
  12.   <div>
  13.     <Tab size="small">
  14.       {tabs.map(item => (
  15.         <TabPane key={item.key} tab={item.tab}>
  16.           {item.content}
  17.         </TabPane>
  18.       ))}
  19.     </Tab>
  20.     <br />
  21.     <Tab size="small" type="wrapped">
  22.       {tabs.map(item => (
  23.         <TabPane key={item.key} tab={item.tab}>
  24.           {item.content}
  25.         </TabPane>
  26.       ))}
  27.     </Tab>
  28.     <br />
  29.     <Tab size="small" type="text">
  30.       {tabs.map(item => (
  31.         <TabPane key={item.key} tab={item.tab}>
  32.           {item.content}
  33.         </TabPane>
  34.       ))}
  35.     </Tab>
  36.     <br />
  37.     <Tab size="small" type="capsule">
  38.       {tabs.map(item => (
  39.         <TabPane key={item.key} tab={item.tab}>
  40.           {item.content}
  41.         </TabPane>
  42.       ))}
  43.     </Tab>
  44.   </div>,
  45.   mountNode
  46. );

自适应方向

用户可以通过 resDirection 属性进行控制该行为。当容器无法容纳所有的选项卡标签时，Tab 组件支持选项卡左右滑动选择，或者下拉选择。

Tab 选项卡 - 图12

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const tabs = [
  6.   { tab: "选项卡一", key: 1 },
  7.   { tab: "选项卡二", key: 2 },
  8.   { tab: "选项卡三", key: 3 },
  9.   { tab: "选项卡四", key: 4 },
  10.   { tab: "选项卡五", key: 5 },
  11.   { tab: "选项卡六", key: 6 },
  12.   { tab: "选项卡七", key: 7 },
  13.   { tab: "选项卡八", key: 8 },
  14.   { tab: "选项卡九", key: 9 }
  15. ];
  17. function onClick(key) {
  18.   console.log(key);
  19. }
  21. ReactDOM.render(
  22.   <div className="fusion-demo" style={{ width: "510px" }}>
  23.     <div className="demo-item-title">默认使用左右活动</div>
  24.     <Tab defaultActiveKey={1}>
  25.       {tabs.map(item => (
  26.         <TabPane key={item.key} tab={item.tab} onClick={onClick}>
  27.           {item.tab}的内容。这里可以容纳更多内容。
  28.         </TabPane>
  29.       ))}
  30.     </Tab>
  32.     <div className="demo-item-title">
  33.       resDirection = "vertical" 时使用下拉框容纳多余元素
  34.     </div>
  35.     <Tab defaultActiveKey={1} resDirection="vertical">
  36.       {tabs.map(item => (
  37.         <TabPane key={item.key} tab={item.tab} onClick={onClick}>
  38.           {item.tab}的内容。这里可以容纳更多内容。
  39.         </TabPane>
  40.       ))}
  41.     </Tab>
  42.   </div>,
  43.   mountNode
  44. );
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     background: #eee;
  4.     color: #333;
  5.     padding: 8px;
  6.     margin: 14px 0;
  7.     text-align: center;
  8. }

在 Grid 中使用 Tab

值得注意的是，当使用 Grid 组件进行外层的布局时，由于 Gird 默认使用的是 flex 进行布局。因此，如果 Tab 组件拥有过多的选项卡时，会导致内层元素撑起整个 flex 容器。此时，需要给容器添加自定义样式 overflow: hidden。

Tab 选项卡 - 图13

查看源码在线预览

  1. import { Tab, Grid } from "@icedesign/base";
  3. const { TabPane } = Tab;
  4. const { Row, Col } = Grid;
  6. const tabs = (function(length) {
  7.   const arr = [];
  8.   for (let i = 1; i < length; i++) {
  9.     arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} 的内容` });
  10.   }
  11.   return arr;
  12. })(15);
  14. function handleChange(key) {
  15.   console.log("change", key);
  16. }
  18. function handleClick(key) {
  19.   console.log("click", key);
  20. }
  22. ReactDOM.render(
  23.   <div className="custom-wrapper">
  24.     <Row className="custom-row">
  25.       <Col fixedSpan="12" className="custom-col-sidebar">
  26.         Sidebar
  27.       </Col>
  28.       <Col className="custom-col-content">
  29.         <Tab onChange={handleChange}>
  30.           {tabs.map(item => (
  31.             <TabPane key={item.key} tab={item.tab} onClick={handleClick}>
  32.               {item.content}
  33.             </TabPane>
  34.           ))}
  35.         </Tab>
  36.       </Col>
  37.     </Row>
  38.   </div>,
  39.   mountNode
  40. );
  1. .custom-row {
  2.     border: 1px solid #ccc;
  3. }
  5. .custom-col-sidebar {
  6.     border-right: 1px solid #ccc;
  7.     height: 130px;
  8.     line-height: 130px;
  9.     text-align: center;
  10. }
  12. .custom-col-content {
  13.     overflow: hidden;
  14. }

触发类型

Tab 支持 click 切换和 hover 切换两种触发类型，默认为 click 触发，您可以使用 triggerType 属性修改默认的触发类型。

Tab 选项卡 - 图14

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. const tabs = [
  6.   { tab: "首页", key: 0, content: "这里是首页内容" },
  7.   { tab: "文档", key: 1, content: "这里是文档内容" },
  8.   { tab: "API", key: 2, content: "这里是 API 内容" }
  9. ];
  11. function onChange(key) {
  12.   console.log("change", key);
  13. }
  15. function handleClick(key) {
  16.   console.log("click", key);
  17. }
  19. function onMouseEnter(key, e) {
  20.   console.log("enter", e.target, key);
  21. }
  23. function onMouseLeave(key, e) {
  24.   console.log("leave", e.target, key);
  25. }
  27. ReactDOM.render(
  28.   <div className="fusion-demo">
  29.     <div className="demo-item-title">triggerType = click</div>
  30.     <Tab triggerType="click" onChange={onChange}>
  31.       {tabs.map(item => (
  32.         <TabPane key={item.key} tab={item.tab} onClick={handleClick}>
  33.           {item.content}
  34.         </TabPane>
  35.       ))}
  36.     </Tab>
  37.     <div className="demo-item-title">triggerType = hover</div>
  38.     <Tab triggerType="hover" onChange={onChange}>
  39.       {tabs.map(item => (
  40.         <TabPane
  41.           key={item.key}
  42.           tab={item.tab}
  43.           onClick={handleClick}
  44.           onMouseEnter={onMouseEnter}
  45.           onMouseLeave={onMouseLeave}
  46.         >
  47.           {item.content}
  48.         </TabPane>
  49.       ))}
  50.     </Tab>
  51.   </div>,
  52.   mountNode
  53. );
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     background: #eee;
  4.     color: #333;
  5.     padding: 8px;
  6.     margin: 14px 0;
  7.     text-align: center;
  8. }

类型

capsule 胶囊型选项卡text 文本型选项卡wrapped 包裹型选项卡bar 普通选项卡（如不指定type属性，则默认使用bar型选项卡）根据使用场景及触发控件的类型，可以通过 type 属性配置选项卡的类型，主要包括：

Tab 选项卡 - 图15

查看源码在线预览

  1. import { Tab } from "@icedesign/base";
  3. const TabPane = Tab.TabPane;
  5. function onChange(key) {
  6.   console.log(key);
  7. }
  9. const tabs = [
  10.   { tab: "首页", key: "home", content: "这里是首页内容" },
  11.   { tab: "文档", key: "doc", content: "这里是文档内容" },
  12.   { tab: "API", key: "api", content: "这里是 API 内容" },
  13.   { tab: "仓库", key: "repo", content: "这里是仓库内容" }
  14. ];
  16. const types = ["bar", "wrapped", "text", "capsule"];
  18. ReactDOM.render(
  19.   <div className="fusion-demo">
  20.     {types.map(type => (
  21.       <div key={type} className="fusion-demo-item">
  22.         <Tab type={type} onChange={onChange}>
  23.           {tabs.map(tab => (
  24.             <TabPane tab={tab.tab} key={tab.key}>
  25.               {tab.content}
  26.             </TabPane>
  27.           ))}
  28.         </Tab>
  29.       </div>
  30.     ))}
  31.   </div>,
  32.   mountNode
  33. );
  1. .fusion-demo-item {
  2.     margin: 14px 0;
  3. }

相关区块

Tab 选项卡 - 图16

暂无相关区块