Neanderthal Pudding Mix

    @antdp/layout-tabs

    1.8.24 • Public • Published

    @antdp/layout-tabs

    npm version npm download

    用于主框架选项卡组件。解决 antd 组件 Tabs 切换性能慢的问题。

    Tab 选项卡技术实现

    测试项 页面切换重新渲染 页面切换 “隐藏” iframe src 嵌入页面 iframe 组件生成
    性能 💯 ⚠️(还需优化) 💯 💯
    页面状态 ⚠️(有代码量)
    路由使用 (浏览器地址栏无变化)
    antd 组件 (大量弹出类组件位置错乱)
    主框架交互 ⚠️(局限以内,父页面交互复杂)
    样式加载 ⚠️(还需优化)

    Installation

    npm i @antdp/layout-tabs --save

    Basic Usage

    import React from 'react';
    import LayoutTabs from '@antdp/layout-tabs';
    
    <LayoutTabs
      activeKey={location.pathname}
      dataSource={[]}
    />

    Component Interface

    interface LayoutTabsRouter {
      component?: JSX.Element;
      exact?: boolean;
      icon: string;
      key: string;
      name: string;
      path: string;
    }
    
    interface LayoutTabsProps {
      activeKey?: string[]
      dataSource?: LayoutTabsRouter[]
      children?: React.ReactNode;
    }

    通过配置 @antdp/config,来解决是否重新渲染或者 iframe 展示页面等功能

    Install

    npm i @antdp/layout-tabs

    DownloadsWeekly Downloads

    1

    Version

    1.8.24

    License

    MIT

    Unpacked Size

    55.5 kB

    Total Files

    22

    Last publish

    Collaborators

    • wcjiang