Antd Design Pro二级菜单不显示icon问题

起因:在antd pro项目,通过自定义配置路由方式,有一些配置全局通用的处理逻辑,希望在所有页面加载前执行,在所有路由外包了一层layout来达到目标,但antd pro对二级菜单默认不展示icon。这里其实二级菜单是项目的主菜单,需要icon展示。

先列一下配置参数具体值:

  • name:string 配置菜单的 name,如果配置了国际化,name 为国际化的 key。
  • icon:string 配置菜单的图标,默认使用 antd 的 icon 名,默认不适用二级菜单的 icon。
  • access:string 权限配置,需要预先配置权限
  • hideChildrenInMenu:true 用于隐藏不需要在菜单中展示的子路由。
  • hideInMenu:true 可以在菜单中不展示这个路由,包括子路由。
  • hideInBreadcrumb:true 可以在面包屑中不展示这个路由,包括子路由。
  • headerRender:false 当前路由不展示顶栏
  • footerRender:false 当前路由不展示页脚
  • menuRender: false 当前路由不展示菜单
  • menuHeaderRender: false 当前路由不展示菜单顶栏
  • parentKeys: string[] 当此节点被选中的时候也会选中 parentKeys 的节点
  • flatMenu 子项往上提,只是不展示父菜单<
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Ant Design Pro 是一个非常流行的企业级 UI 设计语言和 React 组件库,它提供了丰富的组件和模板,可以帮助开发者快速搭建高质量的企业级应用。 在 Ant Design Pro 中,菜单是非常重要的一部分,它可以帮助用户快速浏览和访问系统中的各个功能模块。Ant Design Pro 的菜单支持多级嵌套,可以根据需要进行自定义。 如果想给 Ant Design Pro 菜单中的二级菜单添加自定义的 icon,可以按照以下步骤进行操作: 1. 在项目中引入需要使用的 icon。 在 Ant Design Pro 中,可以使用 Ant Design 自带的 icon,也可以使用自定义的 icon。如果要使用自定义的 icon,需要在项目中引入需要使用的 icon。 2. 在菜单配置中指定 icon。 在菜单配置中,可以指定菜单的 icon。对于二级菜单,需要在菜单配置的 children 属性中指定 icon。例如: ```javascript { path: '/dashboard/analysis', name: '分析页', icon: 'dashboard', component: './Dashboard/Analysis', children: [ { path: '/dashboard/analysis/realtime', name: '实时数据', icon: 'line-chart', component: './Dashboard/Analysis/Realtime', }, { path: '/dashboard/analysis/offline', name: '离线数据', icon: 'bar-chart', component: './Dashboard/Analysis/Offline', }, ], }, ``` 在上述代码中,分析页的二级菜单实时数据和离线数据分别指定了 line-chart 和 bar-chart 作为 icon。 3. 在菜单组件中使用 icon。 在 Ant Design Pro 中,菜单组件使用的是 antd 的 Menu 组件。如果要在菜单中显示 icon,需要在 Menu.Item 组件中使用 icon 属性。例如: ```javascript <Menu.Item key={menuItem.path}> <Link to={menuItem.path}> {menuItem.icon && <Icon type={menuItem.icon} />} <span>{menuItem.name}</span> </Link> </Menu.Item> ``` 在上述代码中,如果 menuItem 中包含 icon 属性,就会在菜单项的左侧显示对应的 icon。 通过以上步骤,就可以在 Ant Design Pro 的菜单中为二级菜单添加自定义的 icon
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值