Tab 选项卡

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

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

Guide

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

何时使用

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

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

  • 文本型选项卡。

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

  • 胶囊型选项卡。

关于动效

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

API

Tab

参数说明类型默认值
activeKey被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换Number/String-
size尺寸可选值:'small', 'medium'Enum'medium'
shape外观形态可选值:'pure', 'wrapped', 'text', 'capsule'Enum'pure'
defaultActiveKey初始化时被激活的选项卡的 keyNumber/String-
animation是否开启动效Booleantrue
excessMode选项卡过多时的滑动模式可选值:'slide', 'dropdown'Enum'slide'
tabPosition导航选项卡的位置，只适用于包裹型（wrapped）选项卡可选值:'top', 'bottom', 'left', 'right'Enum'top'
triggerType激活选项卡的触发方式可选值:'hover', 'click'Enum'click'
lazyLoad是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染Booleantrue
unmountInactiveTabs是否自动卸载未处于激活状态的选项卡Booleanfalse
navStyle导航条的自定义样式Object-
navClassName导航条的自定义样式类String-
contentStyle内容区容器的自定义样式Object-
contentClassName内容区容器的自定义样式类String-
extra导航栏附加内容ReactNode-
onClick点击单个选项卡时触发的回调签名:Function() => voidFunction() => {}
onChange选项卡发生切换时的事件回调签名:Function(key: String/Number) => void参数:key: {String/Number} 改变后的 keyFunction() => {}
onClose选项卡被关闭时的事件回调签名:Function(key: String/Number) => void参数:key: {String/Number} 关闭的选项卡的 keyFunction() => {}
tabRender自定义选项卡模板渲染函数签名:Function(key: String, props: Object) => ReactNode参数:key: {String} 当前 Tab.Item 的 key 值props: {Object} 传给 Tab.Item 的所有属性键值对返回值:{ReactNode} 返回自定义组件Function-
popupProps弹层属性透传, 只有当 excessMode 为 dropdown 时生效Object-

Tab.Item

参数说明类型默认值
title选项卡标题ReactNode-
closeable单个选项卡是否可关闭Booleanfalse
disabled选项卡是否被禁用Boolean-

ARIA and KeyBoard

按键说明
Right Arrow切换至前一项Tab.Item
Left Arrow切换至后一项Tab.Item

代码示例

简单用法

使用 Tab 最简单的例子。

Tab 选项卡 - 图1

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. ReactDOM.render(
  4.     <Tab>
  5.         <Tab.Item title="Home" key="1">Home content</Tab.Item>
  6.         <Tab.Item title="Documentation" key="2">Doc content</Tab.Item>
  7.         <Tab.Item title="Help" key="3">Help Content</Tab.Item>
  8.     </Tab>
  9.     , mountNode);
  1. .next-tabs-content {
  2.     color: #333;
  3.     font-size: 12px;
  4.     padding: 12px;
  5. }

形态

根据使用场景及触发控件的类型，可以通过 shape 属性配置选项卡的类型，主要包括：

  • pure 普通选项卡（默认）
  • wrapped 包裹型选项卡
  • text 文本型选项卡
  • capsule 胶囊型选项卡

Tab 选项卡 - 图2

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. function onChange(key) {
  4.     console.log(key);
  5. }
  7. const tabs = [
  8.     { tab: 'Home', key: 'home', content: 'This is home page' },
  9.     { tab: 'Document', key: 'doc', content: 'This is document page' },
  10.     { tab: 'API', key: 'api', content: 'This is api page' },
  11.     { tab: 'Repo', key: 'repo', content: 'This ia repo link' }
  12. ];
  14. const shapes = ['pure', 'wrapped', 'text', 'capsule'];
  16. ReactDOM.render(
  17.     <div className="fusion-demo">
  18.         {
  19.             shapes.map(shape => (<div key={shape} className="fusion-demo-item">
  20.                 <Tab shape={shape} onChange={onChange}>
  21.                     {
  22.                         tabs.map(tab => <Tab.Item title={tab.tab} key={tab.key}>{tab.content}</Tab.Item>)
  23.                     }
  24.                 </Tab>
  25.             </div>))
  26.         }
  27.     </div>
  28.     , mountNode);
  1. .fusion-demo-item {
  2.     margin: 14px 0;
  3. }
  5. .next-tabs-content {
  6.     color: #333;
  7.     font-size: 12px;
  8.     padding: 12px;
  9. }

尺寸

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

Tab 选项卡 - 图3

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. const tabs = [
  4.     { tab: 'Home', key: 'home', content: 'This is home page' },
  5.     { tab: 'Document', key: 'doc', content: 'This is document page' },
  6.     { tab: 'API', key: 'api', content: 'This is api page' }
  7. ];
  9. ReactDOM.render(
  10.     <div>
  11.         <Tab size="small">
  12.             {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}
  13.         </Tab>
  14.         <br />
  15.         <Tab size="small" shape="wrapped">
  16.             {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}
  17.         </Tab>
  18.         <br />
  19.         <Tab size="small" shape="text">
  20.             {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}
  21.         </Tab>
  22.         <br />
  23.         <Tab size="small" shape="capsule">
  24.             {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}
  25.         </Tab>
  27.     </div>, mountNode);
  1. .next-tabs-content {
  2.     color: #333;
  3.     font-size: 12px;
  4.     padding: 12px;
  5. }

按需加载和自动卸载

默认情况 Tab 不会提前渲染好所有的内容，而是根据 Tab 的激活情况依次进行渲染。某些时候，如果你想一次渲染好所有内容，可以设置 lazyLoad={false} 进行关闭。此外，某些时候，如果你想每次切换选项卡时自动卸载未激活的 Tab，可以设置 unmountInactiveTabs 开启。

Tab 选项卡 - 图4

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. const tabs = [
  4.     { tab: 'Home', key: 0, content: 'This is home page' },
  5.     { tab: 'Document', key: 1, content: 'This is document page' },
  6.     { tab: 'API', key: 2, content: 'This is api page' }
  7. ];
  9. ReactDOM.render(
  10.     <div>
  11.         <div>Render all tab contents</div>
  12.         <Tab lazyLoad={false}>
  13.             {
  14.                 tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)
  15.             }
  16.         </Tab>
  18.         <div>Unmount inactive tabs</div>
  19.         <Tab unmountInactiveTabs>
  20.             {
  21.                 tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)
  22.             }
  23.         </Tab>
  24.     </div>
  25.     , mountNode);
  1. .next-tabs-content {
  2.     color: #333;
  3.     font-size: 12px;
  4.     padding: 12px;
  5. }

位置

包裹型选项卡支持通过 tabPosition 属性设置选项卡的位置，支持 top | right | bottom | left 四个方向。

Tab 选项卡 - 图5

查看源码在线预览

  1. import { Tab, Select } from '@alifd/next';
  3. class Demo extends React.Component {
  5.     state = {
  6.         position: 'top'
  7.     }
  9.     changePosition = (val) => {
  10.         this.setState({
  11.             position: val
  12.         });
  13.     }
  15.     render() {
  16.         return (<div>
  17.             <Select onChange={this.changePosition} placeholder="Choose Positon of Tab">
  18.                 {
  19.                     ['top', 'bottom', 'left', 'right'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)
  20.                 }
  21.             </Select><br /><br />
  22.             <Tab tabPosition={this.state.position} shape="wrapped" contentClassName="custom-tab-content">
  23.                 <Tab.Item title="Tab 1" key="1">Tab 1 Content</Tab.Item>
  24.                 <Tab.Item title="Tab 2" key="2">Tab 2 Content</Tab.Item>
  25.                 <Tab.Item title="Tab 3" key="3">Tab 3 Content</Tab.Item>
  26.             </Tab>
  27.         </div>);
  28.     }
  29. }
  31. ReactDOM.render(<Demo />, mountNode);
  1. .custom-tab-content {
  2.     min-height: 50px;
  3. }
  5. .next-tabs-content {
  6.     color: #333;
  7.     font-size: 12px;
  8.     padding: 12px;
  9. }

超出时滑动

当 Tab 标签非常多时，组件会自动增加滑动支持。可以用过 excessMode 属性切换滑动模式，该属性仅在tabPosition为top或者bottom时生效。

Tab 选项卡 - 图6

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. const tabs = [
  4.     { tab: 'Home', key: 1 },
  5.     { tab: 'Documnet', key: 2 },
  6.     { tab: 'Setting', key: 3 },
  7.     { tab: 'Help', key: 4 },
  8.     { tab: 'Admin', key: 5 },
  9.     { tab: 'More 1', key: 6 },
  10.     { tab: 'More 2', key: 7 },
  11.     { tab: 'More 3', key: 8 },
  12.     { tab: 'More 4', key: 9 },
  13.     { tab: 'More 5', key: 10 },
  14.     { tab: 'More 6', key: 11 },
  15.     { tab: 'More 7', key: 12 },
  16.     { tab: 'More 8', key: 13 },
  17.     { tab: 'More 9', key: 14 },
  18.     { tab: 'More 10', key: 15 },
  19.     { tab: 'More 11', key: 16 }
  20. ];
  22. function onClick(key) {
  23.     console.log(key);
  24. }
  26. ReactDOM.render(<div className="fusion-demo" style={{ maxWidth: '520px' }}>
  27.     <div className="demo-item-title">Dropdown mode</div>
  28.     <Tab excessMode="dropdown">
  29.         {
  30.             tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={onClick}>{item.tab} content, content, content</Tab.Item>)
  31.         }
  32.     </Tab>
  34.     <div className="demo-item-title">Slide mode</div>
  35.     <Tab excessMode="slide">
  36.         {
  37.             tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={onClick}>{item.tab} content, content, content</Tab.Item>)
  38.         }
  39.     </Tab>
  40. </div>
  41.     , mountNode);
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     color: #333;
  4.     padding: 8px;
  5.     margin: 14px 0;
  6. }
  8. .next-tabs-content {
  9.     color: #333;
  10.     font-size: 12px;
  11.     padding: 12px;
  12. }

可关闭选项卡

可关闭选项卡，可以通过在 Tab.Item 上设置 closeable 属性设置该选项卡是否可关闭。

Tab 选项卡 - 图7

查看源码在线预览

  1. import { Tab, Button, Icon } from '@alifd/next';
  3. const panes = [
  4.     { tab: 'Mail', key: 1, closeable: false },
  5.     { tab: 'Message', key: 2, closeable: true },
  6.     { tab: 'Setting', key: 3, closeable: true },
  7.     { tab: 'Unread', key: 4, closeable: true }
  8. ];
  10. class CloseableTab extends React.Component {
  12.     constructor(props) {
  13.         super(props);
  14.         this.state = {
  15.             panes: panes,
  16.             activeKey: panes[0].key
  17.         };
  18.     }
  20.     /*eslint-disable eqeqeq */
  21.     remove(targetKey) {
  22.         let activeKey = this.state.activeKey;
  23.         const panes = [];
  24.         this.state.panes.forEach(pane => {
  25.             if (pane.key != targetKey) {
  26.                 panes.push(pane);
  27.             }
  28.         });
  30.         if (targetKey == activeKey) {
  31.             activeKey = panes[0].key;
  32.         }
  33.         this.setState({ panes, activeKey });
  34.     }
  36.     onClose = (targetKey) => {
  37.         this.remove(targetKey);
  38.     }
  40.     onChange = (activeKey) => {
  41.         this.setState({ activeKey });
  42.     }
  44.     addTabpane = () => {
  45.         this.setState(prevState => {
  46.             const { panes } = prevState;
  47.             panes.push({ tab: 'new tab', key: Math.random(), closeable: true });
  48.             return { panes };
  49.         });
  50.     }
  52.     render() {
  53.         const state = this.state;
  54.         return (
  55.             <div>
  56.                 <Button onClick={this.addTabpane} size="large" type="primary"><Icon type="add"/> New Tab</Button>
  58.                 <Tab
  59.                     shape="wrapped"
  60.                     activeKey={state.activeKey}
  61.                     onChange={this.onChange}
  62.                     onClose={this.onClose}
  63.                     className="custom-tab">
  64.                     {state.panes.map(item => <Tab.Item title={item.tab} key={item.key} closeable={item.closeable}>{item.tab} content</Tab.Item>)}
  65.                 </Tab>
  66.             </div>
  67.         );
  68.     }
  69. }
  71. ReactDOM.render(<CloseableTab />, mountNode);
  1. .custom-tab {
  2.     margin-top: 14px;
  3. }
  5. .next-tabs-content {
  6.     color: #333;
  7.     font-size: 12px;
  8.     padding: 12px;
  9. }

触发类型

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

Tab 选项卡 - 图8

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. const tabs = [
  4.     { tab: 'Home', key: 0, content: 'This is home page' },
  5.     { tab: 'Document', key: 1, content: 'This is document page' },
  6.     { tab: 'API', key: 2, content: 'This is api page' }
  7. ];
  9. function onChange(key) {
  10.     console.log('change', key);
  11. }
  13. function handleClick(key) {
  14.     console.log('click', key);
  15. }
  17. function onMouseEnter(key, e) {
  18.     console.log('enter', e.target, key);
  19. }
  21. function onMouseLeave(key, e) {
  22.     console.log('leave', e.target, key);
  23. }
  25. ReactDOM.render(
  26.     <div className="fusion-demo">
  27.         <div className="demo-item-title">Click to trigger change</div>
  28.         <Tab triggerType="click" onChange={onChange}>
  29.             {
  30.                 tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={handleClick}>{item.content}</Tab.Item>)
  31.             }
  32.         </Tab>
  33.         <div className="demo-item-title">Hover to trigger change</div>
  34.         <Tab triggerType="hover" onChange={onChange}>
  35.             {
  36.                 tabs.map(item => (<Tab.Item
  37.                     key={item.key}
  38.                     title={item.tab}
  39.                     onClick={handleClick}
  40.                     onMouseEnter={onMouseEnter}
  41.                     onMouseLeave={onMouseLeave}>
  42.                     {item.content}
  43.                 </Tab.Item>))
  44.             }
  45.         </Tab>
  46.     </div>
  47.     , mountNode);
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     color: #333;
  4.     padding: 8px;
  5.     margin: 14px 0;
  6. }
  8. .next-tabs-content {
  9.     color: #333;
  10.     font-size: 12px;
  11.     padding: 12px;
  12. }

禁用

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

Tab 选项卡 - 图9

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. ReactDOM.render(
  4.     <Tab>
  5.         <Tab.Item title="Tab 1" disabled key="1">Tab 1 content</Tab.Item>
  6.         <Tab.Item title="Tab 2" key="2">Tab 2 content</Tab.Item>
  7.         <Tab.Item title="Tab 3" key="3">Tab 3 content</Tab.Item>
  8.     </Tab>
  9.     , mountNode);
  1. .next-tabs-content {
  2.     color: #333;
  3.     font-size: 12px;
  4.     padding: 12px;
  5. }

自定义样式

在 Tab 已有样式的基础上，可以通过 contentStyle, contentClassName 等属性自由的进行样式自定义。

Tab 选项卡 - 图10

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. const panes = [
  4.     {
  5.         tab: 'Todo Tasks',
  6.         key: 0
  7.     },
  8.     {
  9.         tab: 'Finished Tasks',
  10.         key: 1
  11.     },
  12.     {
  13.         tab: 'Unread Messages',
  14.         key: 2
  15.     },
  16.     {
  17.         tab: 'Past Messages',
  18.         key: 3
  19.     },
  20.     {
  21.         tab: 'All Messages',
  22.         key: 4
  23.     }
  24. ];
  26. const detachedContentStyle = {
  27.     border: '1px solid #DCDEE3',
  28.     padding: '20px'
  29. };
  31. ReactDOM.render(<div className="fusion-demo">
  32.     <div className="demo-item-title">Customize with contentStyle or contentClassName</div>
  33.     <Tab shape="wrapped" contentStyle={detachedContentStyle}>
  34.         {
  35.             panes.map(pane => <Tab.Item title={pane.tab} key={pane.key}>{pane.tab}</Tab.Item>)
  36.         }
  37.     </Tab>
  39.     <div className="demo-item-title">Setting className and style in Tab.Item</div>
  40.     <Tab shape="wrapped" navStyle={{ background: '#DEE8FF' }}>
  41.         {
  42.             panes.map(pane => {
  43.                 return (<Tab.Item
  44.                     title={pane.tab}
  45.                     key={pane.key}
  46.                     className="custom-tab-item"
  47.                     style={{background: '#FFF'}}>{pane.tab}</Tab.Item>
  48.                 );
  49.             })
  50.         }
  51.     </Tab>
  53.     <div className="demo-item-title">Tabs with equal width</div>
  54.     <Tab shape="capsule">
  55.         {
  56.             panes.map(pane => <Tab.Item title={pane.tab} key={pane.key} className="justify-tabs-tab">{pane.tab}</Tab.Item>)
  57.         }
  58.     </Tab>
  59. </div>
  60.     , mountNode);
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     color: #333;
  4.     padding: 8px;
  5.     margin: 14px 0;
  6. }
  8. .custom-content {
  9.     padding: 15px;
  10. }
  12. .next-tabs-content {
  13.     color: #333;
  14.     font-size: 12px;
  15.     padding: 12px;
  16. }
  18. .custom-tab-item {
  19.     margin-right: -1px !important;
  20. }
  22. .justify-tabs-tab {
  23.     width: 140px;
  24.     text-align: center;
  25. }

自定义选项卡

Tab 支持使用 tabRender 属性返回自定义组件作为选项卡内容，注意该属性接收函数作为属性值。

Tab 选项卡 - 图11

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. function CustomTabItem({ title, desc }) {
  4.     return (<div className="custom-tab-item">
  5.         <div className="tab-title">{title}</div>
  6.         <div className="tab-desc">{desc}</div>
  7.     </div>);
  8. }
  10. const panes = [
  11.     { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },
  12.     { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }
  13. ];
  15. ReactDOM.render(
  16.     <Tab shape="wrapped" tabRender={(key, props) => <CustomTabItem key={key} {...props} />}>
  17.         {
  18.             panes.map(pane => <Tab.Item key={pane.key} {...pane} tabStyle={{ height: '60px' }}>{pane.desc}</Tab.Item>)
  19.         }
  20.     </Tab>
  21.     , mountNode);
  1. .custom-tab-item {
  2.     padding: 10px;
  3. }
  5. .tab-title {
  6.     font-size: 20px;
  7. }
  8. .tab-desc {
  9.     margin: 10px 0 0 0;
  10.     font-size: 12px;
  11. }
  12. .next-tabs-content {
  13.     color: #333;
  14.     font-size: 12px;
  15.     padding: 12px;
  16. }

附加额外内容

通过 extra 属性添加附加内容，请确保只在有限选项卡的情况下才使用附加内容, 该功能在选项卡溢出时会和溢出导航的按钮冲突。

Tab 选项卡 - 图12

查看源码在线预览

  1. import { Tab, Button } from '@alifd/next';
  3. function handleChange(key) {
  4.     console.log(key);
  5. }
  7. function handleClick() {
  8.     console.log('hello world');
  9. }
  11. const extraContent = <Button type="primary" onClick={handleClick}>Hello world</Button>;
  13. ReactDOM.render(
  14.     <div className="fusion-demo">
  15.         <div className="demo-item-title">Extra in Horizontal</div>
  16.         <Tab shape="wrapped" onChange={handleChange} extra={extraContent}>
  17.             <Tab.Item title="Tab 1" key="1">Tab 1 Content</Tab.Item>
  18.             <Tab.Item title="Tab 2" key="2">Tab 2 Content</Tab.Item>
  19.             <Tab.Item title="Tab 3" key="3">Tab 3 Content</Tab.Item>
  20.         </Tab>
  22.         <div className="demo-item-title">Extra in Vertical</div>
  23.         <Tab shape="wrapped" tabPosition="left" onChange={handleChange} extra={extraContent} contentClassName="custom-tab-content">
  24.             <Tab.Item title="Tab 1" key="1">Tab 1 Content</Tab.Item>
  25.             <Tab.Item title="Tab 2" key="2">Tab 2 Content</Tab.Item>
  26.             <Tab.Item title="Tab 3" key="3">Tab 3 Content</Tab.Item>
  27.         </Tab>
  28.     </div>
  29.     , mountNode);
  1. .fusion-demo .demo-item-title {
  2.     font-size: 16px;
  3.     color: #333;
  4.     padding: 8px;
  5.     margin: 14px 0;
  6. }
  8. .custom-tab-content {
  9.     min-height: 150px;
  10. }
  12. .next-tabs-content {
  13.     color: #333;
  14.     font-size: 12px;
  15.     padding: 12px;
  16. }

可编辑的 Tab

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

Tab 选项卡 - 图13

查看源码在线预览

  1. import { Tab, Input } from '@alifd/next';
  3. class EditableTabPane extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  7.         this.state = {
  8.             tabTitle: props.defaultTitle,
  9.             editable: false
  10.         };
  11.     }
  13.     componentWillReceiveProps(nextProps) {
  14.         if (nextProps.defaultTitle !== this.state.tabTitle) {
  15.             this.setState({
  16.                 tabTitle: nextProps.defaultTitle
  17.             });
  18.         }
  19.     }
  21.     onKeyDown = (e) => {
  22.         const { keyCode } = e;
  23.         // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight
  24.         if (keyCode > 36 && keyCode < 41) {
  25.             e.stopPropagation();
  26.         }
  27.     }
  29.     onBlur = (e) => {
  30.         this.setState({
  31.             editable: false,
  32.             tabTitle: e.target.value
  33.         });
  34.     }
  36.     onDblClick = () => {
  37.         this.setState({
  38.             editable: true
  39.         });
  40.     }
  42.     render() {
  43.         const { tabTitle, editable } = this.state;
  44.         if (editable) {
  45.             return <Input defaultValue={tabTitle} onKeyDown={this.onKeyDown} onBlur={this.onBlur} />;
  46.         }
  47.         return <span onDoubleClick={this.onDblClick}>{tabTitle}</span>;
  48.     }
  49. }
  51. const tabRender = (key, { title }) => (<div key={key} className="editable-tab-wrapper">
  52.     <EditableTabPane defaultTitle={title} />
  53. </div>);
  55. ReactDOM.render(<Tab defaultActiveKey="1" tabRender={tabRender}>
  56.     <Tab.Item title="Double Click To Edit Me" key="1">Editable tab</Tab.Item>
  57.     <Tab.Item title="Double Click To Edit Me" key="2">Editable tab</Tab.Item>
  58. </Tab>, mountNode);
  1. .editable-tab-wrapper {
  2.     padding: 10px;
  3. }
  5. .next-tabs-content {
  6.     color: #333;
  7.     font-size: 12px;
  8.     padding: 12px;
  9. }

在 Grid 中使用 Tab

当 Tab 位于 Grid 组件的布局中时，由于 Grid 默认使用 flex 布局方式，当选项卡数量过多时，会导致内层元素撑起整个 flex 容器，此时需要给容器添加自定义样式 overflow: hidden。

Tab 选项卡 - 图14

查看源码在线预览

  1. import { Tab, Grid } from '@alifd/next';
  3. const { Row, Col } = Grid;
  5. const tabs = function(length) {
  6.     const arr = [];
  7.     for (let i = 1; i < length; i++) {
  8.         arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });
  9.     }
  10.     return arr;
  11. }(15);
  13. ReactDOM.render(
  14.     <div className="custom-wrapper">
  15.         <Row className="custom-row">
  16.             <Col fixedSpan="12" className="custom-col-sidebar">Sidebar</Col>
  17.             <Col className="custom-col-content">
  18.                 <Tab>
  19.                     {
  20.                         tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)
  21.                     }
  22.                 </Tab>
  23.             </Col>
  24.         </Row>
  25.     </div>
  26.     , mountNode);
  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 选项卡 - 图15

查看源码在线预览

  1. import { Tab } from '@alifd/next';
  3. function callback(key) {
  4.     console.log(key);
  5. }
  7. ReactDOM.render(
  8.     <Tab onChange={callback} shape="wrapped">
  9.         <Tab.Item title="Tab 1" key="1">
  10.             <Tab shape="wrapped">
  11.                 <Tab.Item title="1-1" key="11">1-1</Tab.Item>
  12.                 <Tab.Item title="1-2" key="12">1-2</Tab.Item>
  13.                 <Tab.Item title="1-3" key="13">1-3</Tab.Item>
  14.             </Tab>
  15.         </Tab.Item>
  16.         <Tab.Item title="Tab 2" key="2">
  17.             <Tab shape="pure">
  18.                 <Tab.Item title="2-1" key="21">2-1</Tab.Item>
  19.                 <Tab.Item title="2-2" key="22">2-2</Tab.Item>
  20.                 <Tab.Item title="3-3" key="23">2-3</Tab.Item>
  21.             </Tab>
  22.         </Tab.Item>
  23.         <Tab.Item title="Tab 3" key="3">
  24.             <Tab shape="capsule">
  25.                 <Tab.Item title="3-1" key="31">3-1</Tab.Item>
  26.                 <Tab.Item title="3-2" key="32">3-2</Tab.Item>
  27.                 <Tab.Item title="3-3" key="33">3-3</Tab.Item>
  28.             </Tab>
  29.         </Tab.Item>
  30.         <Tab.Item title="Tab 4" key="4">
  31.             <Tab shape="text">
  32.                 <Tab.Item title="4-1" key="41">4-1</Tab.Item>
  33.                 <Tab.Item title="4-2" key="42">4-2</Tab.Item>
  34.                 <Tab.Item title="4-3" key="43">4-3</Tab.Item>
  35.             </Tab>
  36.         </Tab.Item>
  37.     </Tab>
  38.     , mountNode);
  1. .next-tabs-content {
  2.     color: #333;
  3.     font-size: 12px;
  4.     padding: 12px;
  5. }

相关区块

Tab 选项卡 - 图16

暂无相关区块