Have ideas to improve npm?Join in the discussion! »

    @uiw/react-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    4.8.9 • Public • Published

    Tabs 标签页

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

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

    基本用法

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

    import React from 'react';
    import ReactDOM from 'react-dom';
    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>
        );
      }
    }
    ReactDOM.render(<Demo />, _mount_);

    行样式

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

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Tabs } from 'uiw';
    
    class Demo extends React.Component {
      render() {
        return (
          <Tabs type="line" activeKey="1" onTabClick={(tab, key, e) => {
              console.log("=>", key, tab);
            }}>
            <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>
        );
      }
    }
    ReactDOM.render(<Demo />, _mount_);

    卡片样式

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

    import React from 'react';
    import ReactDOM from 'react-dom';
    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>
        );
      }
    }
    ReactDOM.render(<Demo />, _mount_);

    卡片样式

    import React from 'react';
    import ReactDOM from 'react-dom';
    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>
        );
      }
    }
    ReactDOM.render(<Demo />, _mount_);

    Tabs.Porps

    参数 说明 类型 默认值
    type 页签的基本样式 Enum{linecarddefault} default
    activeKey 当前激活 tab 面板的 key String -
    onTabClick tab 被点击的回调 Function (item, key, e)=>{}

    Tabs.Pane.Porps

    参数 说明 类型 默认值
    label 选项卡标题 String,Node -
    key 对应 activeKey String,Node -
    disabled 标签是禁用不可点击 Boolean false

    Install

    npm i @uiw/react-tabs

    DownloadsWeekly Downloads

    303

    Version

    4.8.9

    License

    MIT

    Unpacked Size

    45.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar