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;
}
}

相关文章
ant design pro 面包屑和多标签页
ant design pro 面包屑和多标签页
724 0
|
前端开发 数据可视化 API
顶级好用的 React 表单设计生成器,可拖拽生成表单
React 前端开发中,表单组件是排在前三的高频使用的组件,如何快速构建表单,节省力气,避免重复造轮子呢,选择一款适合自己的前端表单设计生成器就非常重要了。本文介绍 3 款顶级好用的 React 表单设计器,其中最后一款卡拉云,是新一代低代码开发工具,不仅能自动生成各类表单,还可以拖拽生成其他常见的前端组件,一行代码连接前后端数据,可快速接入数据库/api。它是表单设计器的超集,可直接生成属于你的后台管理工具,无敌好用。
3708 0
|
移动开发 缓存 自然语言处理
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
ant-design-pro项目开发全攻略(用这个做博客网站模板不要太快,一招鲜吃遍天)
|
11月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
609 1
|
7月前
|
传感器 人工智能 数据可视化
数字孪生高效赋能,打造水利新质生产力
数字孪生水利运用云计算、大数据、AI、实景三维等技术,实现江河水库等水利工程的可视化展示与智能化模拟。通过三维可视化和实时数据映射,平台提供智能感知、分析、预测和预演功能,支持监测预警、调度优化及灾害预防,助力提升水利管理水平,保障水安全。
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
2105 3
使用vite搭建一个React项目!真香!
|
前端开发
CSS-实现文字描边效果
一、介绍 文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。
|
前端开发 API
|
移动开发 前端开发 JavaScript
若依低代码系统开发
若依低代码系统开发
|
NoSQL Redis Docker
使用docker安装redis
该文档介绍了如何使用Docker快速搭建Redis数据库,以便于Spring Boot学习。主要内容包括获取Redis镜像、创建容器、配置持久化存储目录和修改默认配置文件,以及检查和访问Redis容器服务。此外,还提到若需外部访问,需开启宿主机防火墙相应端口。注意,本教程不深入讲解Docker,若想深入学习Docker,建议另寻专门课程。
419 1