@uiw/react-tabs v4.22.3

Tabs 标签页

标签页切换组件，分隔内容上有关联但属于不同类别的数据集合。

import { Tabs } from 'uiw';
// or
import Tabs from '@uiw/react-tabs';

基本用法

基础的、简洁的卡片式标签页。

import React from 'react';
import { Tabs } from 'uiw';

class Demo extends React.Component {
  render() {
    return (
      <Tabs activeKey="1" onTabClick={(tab, key, e) => {
          console.log("=>", key, tab);
        }}>
          <Tabs.Pane label="用户管理" key="1">用户管理</Tabs.Pane>
          <Tabs.Pane label="配置管理" key="2">配置管理</Tabs.Pane>
          <Tabs.Pane sequence="fadeIn up" label="角色管理" key="3">角色管理</Tabs.Pane>
          <Tabs.Pane label="大爷欢乐多" key="4"><div>大爷欢乐多22</div></Tabs.Pane>
      </Tabs>
    );
  }
}
export default Demo;

行样式

基础的、简洁的卡片式标签页。

import React from 'react';
import { Tabs,Button } from 'uiw';

class Demo extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }
   onClick() {
     const { activeKey } = this.state;
    this.setState({activeKey: activeKey < 4 ? (Number(activeKey) + 1).toString() :'1'})
  };

  render() {
    return (
      <>
        <Button type="primary" onClick={this.onClick.bind(this)}>点击我切换tab显项卡</Button>
        <Tabs type="line" activeKey={this.state.activeKey} onTabClick={(key,tab, e) => {
          console.log("=>", key, tab);
          this.setState({activeKey: key})
        }}>
        <Tabs.Pane label="用户管理" key="1">用户管理</Tabs.Pane>
        <Tabs.Pane disabled label="配置管理" key="2">配置管理</Tabs.Pane>
        <Tabs.Pane sequence="fadeIn up" label="角色管理" key="3">角色管理</Tabs.Pane>
        <Tabs.Pane label="大爷欢乐多" key="4"><div>大爷欢乐多22</div></Tabs.Pane>
 </Tabs>
      </>
    );
  }
}
export default Demo;

卡片样式

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

import React from 'react';
import { Tabs } from 'uiw';

class Demo extends React.Component {
  render() {
    return (
      <Tabs type="card" activeKey="1" onTabClick={(tab, key, e) => {
          console.log("=>", key, tab);
        }}>
        <Tabs.Pane label="用户管理" key="1">用户管理</Tabs.Pane>
        <Tabs.Pane label="配置管理" key="2">配置管理</Tabs.Pane>
        <Tabs.Pane disabled sequence="fadeIn up" label="角色管理" key="3">角色管理</Tabs.Pane>
        <Tabs.Pane label="大爷欢乐多" key="4"><div>大爷欢乐多22</div></Tabs.Pane>
      </Tabs>
    );
  }
}
export default Demo;

卡片样式

import React from 'react';
import { Tabs, Divider } from 'uiw';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }
  render() {
    const { activeKey } = this.state;
    return (
      <div>
        <Tabs
          type="card"
          activeKey={activeKey}
          onTabClick={(activeKey, key, e) => {
            this.setState({ activeKey });
          }}
        >
          <Tabs.Pane label="用户管理" key="1" />
          <Tabs.Pane label="配置管理" key="2" />
          <Tabs.Pane disabled sequence="fadeIn up" label="角色管理" key="3" />
          <Tabs.Pane label="大爷欢乐多" key="4" />
        </Tabs>
        <Divider />
        {activeKey === '1' && (
          <div>用户管理{activeKey}</div>
        )}
        {activeKey === '2' && (
          <div>配置管理{activeKey}</div>
        )}
        {activeKey === '3' && (
          <div>角色管理{activeKey}</div>
        )}
        {activeKey === '4' && (
          <div>大爷欢乐多{activeKey}</div>
        )}
      </div>
    );
  }
}
export default Demo;

超出收缩

当pane过多,超出宽度度时,会将超出部分收缩到下拉选项

import React from 'react';
import { Tabs } from 'uiw';

class Demo extends React.Component {

render() {
    const panes=[]
    for (let index = 0; index < 20; index++) {
      panes.push({label:`Tabs-${index}`,key:index})
    }

    return (
      <Tabs
        style={{width:700}}
        activeKey="1"
        onTabClick={(tab, key, e) => {
          console.log("=>", key, tab);
        }}>
        {panes.map(item=>{
          return(
            <Tabs.Pane label={item.label} key={item.key}>{item.label}</Tabs.Pane>
          )
        })}
      </Tabs>
    );
  }
}
export default Demo;

Tabs.Porps

Tabs.Pane.Porps