Ant Design pro路由菜单标签页插件使用

简介: Ant Design pro路由菜单标签页插件使用

安装命令


npm i umi-plugin-panel-tabs


在config/config.js文件下的definConfig方法中进行配置:


export default defineConfig({
  panelTab: {
    use404: true,
    useAuth: true,
    autoI18n: true,
    tabsLimit: 10,
    tabsLimitWait: 500,
    tabsLimitWarnTitle: '提示',
    tabsLimitWarnContent: '您当前打开页面过多, 请关闭不使用的页面以减少卡顿!',
    tabsBarBackgroundColor: '#FFFFFF',
    tabsTagColor: '#1890ff',
  },
});


在该路由中配置属性hideInPanelTab, 将其设置为true, 此路由就不会在标签页中显示


配置后标签栏位置出现了偏移?


在 app.jsx 的 layout 方法中添加 disableContentMargin: true 配置

或者


在global全局css中加入以下代码:
.ant-layout-content{
margin-top:0;
position: relative;
>div:first-child{
position:absolute;
left:0;
width:100%;
margin-left:208px;
height:50px;
}
}

相关文章
|
9月前
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
291 0
ant design pro 面包屑和多标签页
ant design pro 面包屑和多标签页
380 0
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1165 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
3月前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
33 0
|
前端开发
ant design封装一个弹框组件
ant design封装一个弹框组件
94 0
|
前端开发
ant design一个页面(新增编辑)
ant design一个页面(新增编辑)
59 0
Ant Design Pro:设置目录配置
Ant Design Pro:设置目录配置
116 0
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1216 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
9月前
Ant Design pro删除模块笔记(二)
Ant Design pro删除模块笔记(二)
68 0
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
714 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)