Ant Design Pro菜单动态添加图标 ant design pro v5 动态菜单 权限,注:这里说的动态路由不是真的动态路由,只是借助全量菜单达到相同的功能效果项目背景:antdprov5react,要实现的功能是:admin在页面可新增功能模块与menu对应,而不是单纯地勾选已有菜单的展示与隐藏,
最近利用ant-design-pro开发项目要实现之前的项目嵌入到新项目里来,并且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那当然是从文档中找实现的方法,终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法 进入src/layouts/Basilayout.js在官网中直接复制该...
Ant Design Pro自定义svg菜单图标(不使用iconfont) 环境和依赖 umi 3.5.0 场景 Ant Design Pro的文档介绍了配置菜单icon的方法,需要在 routes.ts 中设置icon属性,但只能使用antd的icon或者使用 iconFont,如果我想直接使用设计师提供的svg图片作为菜单图标,应该怎么办呢?本文提供了一种解决方案 步骤 引入需要用到的sv...
icon截图.png 至此,可以将图标下方的type,如:icon-weixin,设置到路由中的icon上,即可设置成功。 在业务组件中使用iconfont // 在本项目中使用iconfont图标import{createFromIconfontCN}from'@ant-design/icons'exportdefaultcreateFromIconfontCN({// 该地址为iconfont中的项目地址,根据实际进行修改scriptUrl:'//at.ali...
前段时间写了几篇ant design pro v4服务器控制菜单和路由的文章。有小伙伴说按照文章的方法菜单是拉取下来了。但是,跟使用config.ts控制菜单相比,服务器下发的菜单没有显示菜单图标(Icon)。于是,又花了一点时间解决icon显示的问题,这里来跟大家分享。
让我们选择,我们必然选择的是第二种,从服务器加载menu,并且使用icon图标。 2.代码演示 如下,是官方文档的从服务器加载menu,并给它赋值icon的代码。 import { HeartOutlined, SmileOutlined } from '@ant-design/icons';import type { MenuDataItem } from '@ant-design/pro-components';import { PageContainer,...
其实图标在ant-design-vue中其实已经有很多可选的,可有些情况,产品/UI可能还是会要求使用特定的图标。这可能需要上传svg到iconfont.cn阿里图标库中,本文不讲述如何上传svg到iconfont。而是介绍如何使用iconfont中的图标,昨天花了两个小时没找到关于vue如何自定义图标的文章, 大多数都是关于react自定义图标。 所以花了...
寻找能让菜单的icon图标显示的修改方法 app.tsx中的内容 importfixMenuItemIconfrom'./fixMenultemIcon'; import{SmileOutlined,HeartOutlined,DashboardOutlined}from'@ant-design/icons'; // 引入了第1步中api.ts中定义的currentUserMenus接口,并定义别名queryCurrentUserMenus ...
最近利用ant-design-pro开发项目要实现之前的项目嵌入到新项目里来,并且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那当然是从文档中找实现的方法,终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法 ...
2、设置菜单栏宽度 框架的菜单栏宽度较长,在/src/app.tsx文件下新增参数 3、菜单栏颜色 v5版本开始后,菜单栏颜色跟主题颜色已经分开,可以参考链接:https://procomponents.ant.design/components/layout#sider-token 可以在 config/defaultSetting.ts 定义 sider 对象...