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

2.1.1 • Public • Published

@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 展示页面等功能

Dependents (2)

Package Sidebar

Install

npm i @antdp/layout-tabs

Weekly Downloads

88

Version

2.1.1

License

MIT

Unpacked Size

24.7 kB

Total Files

23

Last publish

Collaborators

  • uiwjs
  • wcjiang