npm.io
2.1.2 • Published 1 year ago

@antdp/layout-tabs

Licence
MIT
Version
2.1.2
Deps
2
Size
24 kB
Vulns
1
Weekly
0
Stars
18
SummaryDependencyVersions

@antdp/layout-tabs

npm version npm download

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

Tab 选项卡技术实现

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

Installation

npm i @antdp/layout-tabs --save # yarn add @antdp/layout-tabs

基本使用

import React from 'react';
import LayoutTabs from '@antdp/layout-tabs';

const Demo = ()=>{
  return (
    <LayoutTabs
      // 菜单路由信息
      dataSource={[]}
    />
  )
}

export default Demo;

API

参数 说明 类型 默认值
dataSource 菜单路由数据 LayoutTabsRouterProps[] -
bodyPadding 内容边距 `string number`
LayoutTabsRouterProps
参数 说明 类型 默认值
icon logo string -
key key健 string -
name 名称 string -
path 路径 string -
exact 是否匹配路由 boolean -
location 路由信息 any -
match 匹配信息 any -
element 渲染内容 React.ReactNode -

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

Keywords

layout-tabslayouttabsantdpantd