Tab

Example
简单用法
形态
小号尺寸
按需加载和自动卸载
位置
超出时滑动
可关闭/新增选项卡
触发类型
禁用
自定义样式
自定义选项卡
附加额外内容
可编辑的 Tab
在 Grid 中使用 Tab
选项卡嵌套
禁止键盘事件
API

选项卡切换组件。

何时使用 #

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

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

普通选项卡，引领整页面的内容，起导航的作用。
文本型选项卡。
包裹型选项卡，在页面结构中，只是局部展示，需要和其他内容结合出现。
胶囊型选项卡。

如何使用 #

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

代码演示 #

简单用法 #

使用 Tab 最简单的例子。

形态 #

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

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

import { useState } from 'react';
import ReactDOM from 'react-dom';
import { Tab, Radio } from '@alifd/next';
function onChange(key) {
  console.log(key);
}
const Demo = () => {
  const [shape, setShape] = useState('pure');
  return (
    <div>
      {'shape:'}{' '}
      <Radio.Group shape="button" value={shape} onChange={value => setShape(value)}>
        <Radio value="pure">pure</Radio>
        <Radio value="wrapped">wrapped</Radio>
        <Radio value="text">text</Radio>
        <Radio value="capsule">capsule</Radio>
      </Radio.Group>
      <br />
      <br />
      <Tab shape={shape} onChange={onChange}>
        <Tab.Item key="home" title="Home">
          This is home page
        </Tab.Item>
        <Tab.Item key="document" title="Document">
          This is document page
        </Tab.Item>
        <Tab.Item key="api" title="API">
          This is api page
        </Tab.Item>
        <Tab.Item key="repo" title="Repo">
          This is repo link
        </Tab.Item>
      </Tab>
    </div>
  );
};
ReactDOM.render(<Demo />, mountNode);

小号尺寸 #

可以通过 size=small 设置小号尺寸，一般用于弹出框等较狭窄的容器内。

import ReactDOM from 'react-dom';
import { Tab } from '@alifd/next';
const tabs = [
  { tab: 'Home', key: 'home', content: 'This is home page' },
  { tab: 'Document', key: 'doc', content: 'This is document page' },
  { tab: 'API', key: 'api', content: 'This is api page' },
];
ReactDOM.render(
  <div>
    <Tab size="small">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <Tab size="small" shape="wrapped">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <Tab size="small" shape="text">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <Tab size="small" shape="capsule">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
  </div>,
  mountNode
);

按需加载和自动卸载 #

默认情况 Tab 不会提前渲染好所有的内容，而是根据 Tab 的激活情况依次进行渲染。

可以设置 lazyLoad={false} 一次渲染所有 TabItem 内容。
可以设置 unmountInactiveTabs 在切换选项卡时自动卸载其他 TabItem。

位置 #

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

超出时滑动 #

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

import ReactDOM from 'react-dom';
import { Tab } from '@alifd/next';
const tabs = [
  { tab: 'Home', key: 1 },
  { tab: 'Documnet', key: 2 },
  { tab: 'Setting', key: 3 },
  { tab: 'Help', key: 4 },
  { tab: 'Admin', key: 5 },
  { tab: 'More 1', key: 6 },
  { tab: 'More 2', key: 7 },
  { tab: 'More 3', key: 8 },
  { tab: 'More 4', key: 9 },
  { tab: 'More 5', key: 10 },
  { tab: 'More 6', key: 11 },
  { tab: 'More 7', key: 12 },
  { tab: 'More 8', key: 13 },
  { tab: 'More 9', key: 14 },
  { tab: 'More 10', key: 15 },
  { tab: 'More 11', key: 16 },
];
function onClick(key) {
  console.log(key);
}
ReactDOM.render(
  <div className="fusion-demo" style={{ maxWidth: '520px' }}>
    <Tab excessMode="dropdown">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab} onClick={onClick}>
          {item.tab}
          {' content, content, content'}
        </Tab.Item>
      ))}
    </Tab>
    <br />
    <Tab excessMode="slide">
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab} onClick={onClick}>
          {item.tab}
          {' content, content, content'}
        </Tab.Item>
      ))}
    </Tab>
  </div>,
  mountNode
);

可关闭/新增选项卡 #

可关闭选项卡，可以通过在 Tab.Item 上设置 closeable 属性设置该选项卡是否可关闭。可以通过 showAdd 开启新增功能

import React from 'react';
import ReactDOM from 'react-dom';
import { Tab, Button, Icon } from '@alifd/next';
const panes = [
  { tab: 'Mail', key: '1', closeable: false },
  { tab: 'Message', key: '2', closeable: true },
  { tab: 'Setting', key: '3', closeable: true },
  { tab: 'Unread', key: '4', closeable: true },
];
class CloseableTab extends React.Component {
  constructor(props) {
    super(props);
    this.onClose = targetKey => {
      this.remove(targetKey);
    };
    this.onChange = activeKey => {
      this.setState({ activeKey });
    };
    this.addTabpane = () => {
      const panes2 = this.state.panes;
      const newItem = { tab: 'new tab', key: Math.random().toString(), closeable: true };
      panes2.push(newItem);
      this.setState({
        panes: [...panes2],
        activeKey: newItem.key,
      });
    };
    this.state = {
      panes,
      activeKey: panes[0].key,
    };
  }
  remove(targetKey) {
    let activeKey = this.state.activeKey;
    const panes2 = [];
    this.state.panes.forEach(pane => {
      if (pane.key !== targetKey) {
        panes2.push(pane);
      }
    });
    if (targetKey === activeKey) {
      activeKey = panes2[0].key;
    }
    this.setState({ panes: panes2, activeKey });
  }
  render() {
    const { panes: panes2, activeKey } = this.state;
    return (
      <div>
        <Button onClick={this.addTabpane} type="primary">
          <Icon type="add" />
          {' New Tab'}
        </Button>
        <Tab
          shape="wrapped"
          activeKey={activeKey}
          onChange={this.onChange}
          onClose={this.onClose}
          onAdd={this.addTabpane}
          style={{ marginTop: 10 }}
          showAdd
        >
          {panes2.map(item => (
            <Tab.Item title={item.tab} key={item.key} closeable={item.closeable}>
              {item.tab}
              {' content'}
            </Tab.Item>
          ))}
        </Tab>
      </div>
    );
  }
}
ReactDOM.render(<CloseableTab />, mountNode);

触发类型 #

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

import ReactDOM from 'react-dom';
import { Tab } from '@alifd/next';
const tabs = [
  { tab: 'Home', key: 0, content: 'This is home page' },
  { tab: 'Document', key: 1, content: 'This is document page' },
  { tab: 'API', key: 2, content: 'This is api page' },
];
const onChange = key => {
  console.log('change', key);
};
const handleClick = key => {
  console.log('click', key);
};
const onMouseEnter = (key, e) => {
  console.log('enter', e.target, key);
};
const onMouseLeave = (key, e) => {
  console.log('leave', e.target, key);
};
ReactDOM.render(
  <div className="fusion-demo">
    <div className="demo-item-title">Click to change</div>
    <Tab triggerType="click" onChange={onChange}>
      {tabs.map(item => (
        <Tab.Item key={item.key} title={item.tab} onClick={handleClick}>
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
    <div className="demo-item-title">Hover to change</div>
    <Tab triggerType="hover" onChange={onChange}>
      {tabs.map(item => (
        <Tab.Item
          key={item.key}
          title={item.tab}
          onClick={handleClick}
          onMouseEnter={onMouseEnter}
          onMouseLeave={onMouseLeave}
        >
          {item.content}
        </Tab.Item>
      ))}
    </Tab>
  </div>,
  mountNode
);

禁用 #

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

自定义样式 #

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

import ReactDOM from 'react-dom';
import { Tab } from '@alifd/next';
const panes = [
  {
    tab: 'Todo Tasks',
    key: 0,
  },
  {
    tab: 'Finished Tasks',
    key: 1,
  },
  {
    tab: 'Unread Messages',
    key: 2,
  },
  {
    tab: 'Past Messages',
    key: 3,
  },
  {
    tab: 'All Messages',
    key: 4,
  },
];
const detachedContentStyle = {
  padding: '20px',
};
ReactDOM.render(
  <div className="fusion-demo">
    <div className="demo-item-title">Customize with contentStyle or contentClassName</div>
    <Tab shape="wrapped" contentStyle={detachedContentStyle}>
      {panes.map(pane => (
        <Tab.Item title={pane.tab} key={pane.key}>
          {pane.tab}
        </Tab.Item>
      ))}
    </Tab>
    <div className="demo-item-title">Setting className and style in Tab.Item</div>
    <Tab shape="wrapped" navStyle={{ background: '#DEE8FF' }}>
      {panes.map(pane => {
        return (
          <Tab.Item
            title={pane.tab}
            key={pane.key}
            className="custom-tab-item"
            style={{ background: '#FFF' }}
          >
            {pane.tab}
          </Tab.Item>
        );
      })}
    </Tab>
    <div className="demo-item-title">Tabs with same width</div>
    <Tab shape="capsule">
      {panes.map(pane => (
        <Tab.Item title={pane.tab} key={pane.key} className="justify-tabs-tab">
          {pane.tab}
        </Tab.Item>
      ))}
    </Tab>
  </div>,
  mountNode
);

自定义选项卡 #

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

import ReactDOM from 'react-dom';
import { Tab } from '@alifd/next';
function CustomTabItem({ title, desc, img }) {
  return (
    <div className="custom-tab-item">
      <div className="tab-title">
        <img className="tab-img" src={img} alt={title} />
        {title}
      </div>
      <div className="tab-desc">{desc}</div>
    </div>
  );
}
const panes = [
  {
    key: 'e-checking',
    title: 'Alipay',
    desc: 'The fee to be paid is $15',
    img: 'https://img.alicdn.com/imgextra/i4/O1CN01WZitW51tO7ueHnfEt_!!6000000005891-2-tps-200-200.png',
  },
  {
    key: 'brand-card',
    title: 'Bank Card',
    desc: 'The fee to be paid is $17',
    img: 'https://img.alicdn.com/imgextra/i2/O1CN01NRazFH1nqATF6ywsJ_!!6000000005140-2-tps-200-200.png',
  },
];
ReactDOM.render(
  <Tab shape="wrapped" tabRender={(key, props) => <CustomTabItem {...props} key={key} />}>
    {panes.map(({ key, ...pane }) => (
      <Tab.Item key={key} {...pane}>
        {pane.desc}
      </Tab.Item>
    ))}
  </Tab>,
  mountNode
);

附加额外内容 #

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

import ReactDOM from 'react-dom';
import { Tab, Button } from '@alifd/next';
function handleChange(key) {
  console.log(key);
}
function handleClick() {
  console.log('hello world');
}
const extraContent = (
  <Button type="primary" onClick={handleClick}>
    Hello world
  </Button>
);
ReactDOM.render(
  <div className="fusion-demo">
    <div className="demo-item-title">Extra in Horizontal</div>
    <Tab shape="wrapped" onChange={handleChange} extra={extraContent}>
      <Tab.Item title="Tab 1" key="1">
        Tab 1 Content
      </Tab.Item>
      <Tab.Item title="Tab 2" key="2">
        Tab 2 Content
      </Tab.Item>
      <Tab.Item title="Tab 3" key="3">
        Tab 3 Content
      </Tab.Item>
    </Tab>
    <div className="demo-item-title">Extra in Vertical</div>
    <Tab
      shape="wrapped"
      tabPosition="left"
      onChange={handleChange}
      extra={extraContent}
      contentClassName="custom-tab-content"
    >
      <Tab.Item title="Tab 1" key="1">
        Tab 1 Content
      </Tab.Item>
      <Tab.Item title="Tab 2" key="2">
        Tab 2 Content
      </Tab.Item>
      <Tab.Item title="Tab 3" key="3">
        Tab 3 Content
      </Tab.Item>
    </Tab>
  </div>,
  mountNode
);

可编辑的 Tab #

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Tab, Input } from '@alifd/next';
class EditableTabPane extends React.Component {
  constructor(props) {
    super(props);
    this.onKeyDown = e => {
      const { keyCode } = e;
      if (keyCode > 36 && keyCode < 41) {
        e.stopPropagation();
      }
    };
    this.onBlur = e => {
      this.setState({
        editable: false,
        tabTitle: e.target.value,
      });
    };
    this.onDblClick = () => {
      this.setState({
        editable: true,
      });
    };
    this.state = {
      tabTitle: props.defaultTitle,
      editable: false,
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.defaultTitle !== this.state.tabTitle) {
      this.setState({
        tabTitle: nextProps.defaultTitle,
      });
    }
  }
  render() {
    const { tabTitle, editable } = this.state;
    if (editable) {
      return <Input defaultValue={tabTitle} onKeyDown={this.onKeyDown} onBlur={this.onBlur} />;
    }
    return <span onDoubleClick={this.onDblClick}>{tabTitle}</span>;
  }
}
const tabRender = (key, { title }) => (
  <div key={key} className="editable-tab-wrapper">
    <EditableTabPane defaultTitle={title} />
  </div>
);
ReactDOM.render(
  <Tab defaultActiveKey="1" tabRender={tabRender}>
    <Tab.Item title="Double Click To Edit Me" key="1">
      Editable tab
    </Tab.Item>
    <Tab.Item title="Double Click To Edit Me" key="2">
      Editable tab
    </Tab.Item>
  </Tab>,
  mountNode
);

在 Grid 中使用 Tab #

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

选项卡嵌套 #

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

import ReactDOM from 'react-dom';
import { Tab } from '@alifd/next';
function callback(key) {
  console.log(key);
}
ReactDOM.render(
  <Tab onChange={callback} shape="wrapped">
    <Tab.Item title="Tab 1" key="1">
      <Tab shape="wrapped">
        <Tab.Item title="1-1" key="11">
          1-1
        </Tab.Item>
        <Tab.Item title="1-2" key="12">
          1-2
        </Tab.Item>
        <Tab.Item title="1-3" key="13">
          1-3
        </Tab.Item>
      </Tab>
    </Tab.Item>
    <Tab.Item title="Tab 2" key="2">
      <Tab shape="pure">
        <Tab.Item title="2-1" key="21">
          2-1
        </Tab.Item>
        <Tab.Item title="2-2" key="22">
          2-2
        </Tab.Item>
        <Tab.Item title="3-3" key="23">
          2-3
        </Tab.Item>
      </Tab>
    </Tab.Item>
    <Tab.Item title="Tab 3" key="3">
      <Tab shape="capsule">
        <Tab.Item title="3-1" key="31">
          3-1
        </Tab.Item>
        <Tab.Item title="3-2" key="32">
          3-2
        </Tab.Item>
        <Tab.Item title="3-3" key="33">
          3-3
        </Tab.Item>
      </Tab>
    </Tab.Item>
    <Tab.Item title="Tab 4" key="4">
      <Tab shape="text">
        <Tab.Item title="4-1" key="41">
          4-1
        </Tab.Item>
        <Tab.Item title="4-2" key="42">
          4-2
        </Tab.Item>
        <Tab.Item title="4-3" key="43">
          4-3
        </Tab.Item>
      </Tab>
    </Tab.Item>
  </Tab>,
  mountNode
);

禁止键盘事件 #

通过 disabledKeyboard=true 禁止 Tab 聚焦时的键盘 ↑,↓,← ,→ 切换

API #

Tab #

参数	说明	类型	默认值
activeKey	被激活的选项卡的 key, 赋值则 tab 为受控组件，用户无法切换	string	-
defaultActiveKey	初始化时被激活的选项卡的 key	string	-
shape	外观形态	'pure' \| 'wrapped' \| 'text' \| 'capsule'	'pure'
animation	是否开启动效	boolean	true
excessMode	选项卡过多时的滑动模式	'slide' \| 'dropdown'	'slide'
tabPosition	导航选项卡的位置，只适用于包裹型（wrapped）选项卡	'top' \| 'bottom' \| 'left' \| 'right'	'top'
size	尺寸	'small' \| 'medium'	'medium'
triggerType	激活选项卡的触发方式	'hover' \| 'click'	'click'
lazyLoad	是否延迟加载 TabPane 的内容，默认开启，即不提前渲染	boolean	true
unmountInactiveTabs	是否自动卸载未处于激活状态的选项卡	boolean	false
navStyle	导航条的自定义样式	CSSProperties	-
navClassName	导航条的自定义样式类	string	-
contentStyle	内容区容器的自定义样式	CSSProperties	-
contentClassName	内容区容器的自定义样式类	string	-
extra	导航栏附加内容	ReactNode	-
disableKeyboard	禁用键盘事件	boolean	false
onClick	点击单个选项卡时触发的回调	(key: string) => void	-
onChange	选项卡发生切换时的事件回调签名: 参数: key: 改变后的 key	(key: string) => void	-
onClose	选项卡被关闭时的事件回调签名: 参数: key: 关闭的选项卡的 key	(key: string) => void	-
tabRender	自定义选项卡模板渲染函数签名: 参数: key: 当前 Tab.Item 的 key 值 props: 传给 Tab.Item 的所有属性键值对返回值返回值: - 返回自定义组件	(key: string, props: Record<string, unknown>) => ReactNode	-
popupProps	弹层属性透传，只有当 excessMode 为 dropdown 时生效	ComponentPropsWithRef<typeof Popup>	-
icons	自定义 icon	{ dropdown?: string \| ReactNode; prev?: string \| ReactNode; next?: string \| ReactNode; }	-
showAdd	展示新增按钮	boolean	-
onAdd	新增的事件回调	() => void	-
addIcon	自定义添加按钮	ReactNode	-

Tab.Item #

参数	说明	类型	默认值
title	选项卡标题	ReactNode	-
closeable	单个选项卡是否可关闭	boolean	false
disabled	选项卡是否被禁用	boolean	false
style	导航栏单个选项卡样式	CSSProperties	-
className	导航栏单个选项卡样式类	string	-
onClick	导航栏单个选项卡点击时的回调	(key: string, e: React.MouseEvent<HTMLElement>) => void	-
onMouseEnter	导航栏单个选项卡鼠标移入时的回调	(key: string, e: React.MouseEvent<HTMLElement>) => void	-
onMouseLeave	导航栏单个选项卡鼠标移出时的回调	(key: string, e: React.MouseEvent<HTMLElement>) => void	-
children	子元素	React.ReactNode	-

无障碍键盘操作指南 #

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