ant pro layout 实现菜单收缩切换logo功能

原创 已于 2022-08-19 17:29:50 修改 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #react.js

于 2022-08-19 17:16:55 首次发布
本文介绍了如何在Ant Design Pro项目中使用全局变量实现菜单收缩时logo的动态切换，通过useState问题的解决，以及页面内容重写接口的注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

@ant pro layout 实现菜单收缩切换logo功能由于项目中layout中使用useState报错，这里使用了全局的initialState和setInitialState来保存左侧菜单收缩时的collapsed值变化
在这里插入图片描述
菜单收缩时保存collapsed值
在这里插入图片描述
根据collapsed值来判断应该显示的logo,这里实现的很粗糙，简单实现了这个功能
在这里插入图片描述顺便标记一下，页面内容渲染的重写接口，可以包一些keeplive等组件
在这里插入图片描述
插入layout代码：
在这里插入图片描述
在这里插入图片描述

参考链接：ant design pro v5 自定义侧边栏收缩按钮位置

AntD自定义展开收缩的button 及 自定义展开收缩时对应的logo图片
Cvory
01-11 2245
需求如图： 代码： 这里用到的是Prolayout组件 logo={collapsed ? logoMini : logo} collapsed={collapsed} collapsedButtonRender={false} headerContentRender={() => { return ( <div onClick={() => setCol
react学习之路（2）——调整页面布局
wxh777789的专栏
09-19 1034
1.增加了菜单的收缩展开功能 2.调整页面高度，充满整个页面，底栏一直在底端。 3.调整菜单宽度和logo大小 App.js import React from 'react'; import './App.css'; import {Layout, Button, Menu, Breadcrumb} from 'antd'; import { AppstoreOutlined, MenuUnfoldOutlined, MenuFoldOutlined, PieC
ProLayout 布局
Jimmy的专栏
10-29 7271
第一次采用ProLayout的时候也担心会不会不够灵活，比人我需要修改折叠按钮（collapsed）的位置能不能实现，带着这种猜疑，我进入官网，我的担心立刻解除，他们竟然直接就有了类似的demo: （可以进入以下网址，查看具体示例代码）https://procomponents.ant.design/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-collapsed。
antd design pro修改tree展开/折叠图标
qq_40492771的博客
03-02 3826
.less文件 :global{ .ant-tree-switcher_close{ background: url('../../assets/browse/down.png') no-repeat; i{ display: none; } } .ant-tree-switcher_open{ background: url('../../assets/browse/up.png') no-re
Ant Design Pro组件pro-layout菜单自定义icon，以及二级菜单不显示icon处理
TwelveT的博客
09-12 7574
使用IconFont IconFont官网，进入后我们登陆，然后创建一个项目管理 图中的连接是Icon的地址，需要把它放到我们项目配置下的iconfontUrl参数下 注意！！！ 创建项目时 FontClass/Symbol 前缀 一定要是：icon- 这是规定的，不要随便写 解决在Pro V4版本二级后均不显示Icon的问题 这时我们就需要使用到ant提供的Icon组件 createFromIconfontCN import { createFromIconfontCN } from '@ant
Logo Title以及Loading 的改造
Jimmy的专栏
10-27 515
考虑到我们创建的管理后台是需要交付给我们的用户使用的，直接用Ant Design Pro的Title和Logo显然不合适，所以我们需要把它们改造成我们自己的。
react使用antd侧边菜单栏伸缩
最新发布
01-22
为了实现在React应用程序中的Ant Design Pro V5自定义侧边栏收缩按钮的位置以及实现其伸缩效果，可以采用`useMergedState`钩子来管理侧边栏的状态变化。下面是一个具体的例子： ```jsx import React, { useState } ...
Ant Design Pro 实现动态菜单
SongZhengxing_的博客
05-21 1805
当我们使用了动态返回的菜单时，图标就不出现了，这时需要手动映射icon图标，可参考。中不存在的路由信息，页面将会无法访问，具体问题可参考（最终实现的效果，先给管理员和普通和用户分配不同的菜单。前提说明：实现动态路由时，所有的路由都必须提前在。的 layout 方法，在配置中添加。切换登录不同角色的用户，会显示不同的菜单。实现过程中遇到的问题以及解决方法。接口返回的data菜单格式和。这里二级菜单的图标没有，官方是。中注册好，如果动态返回了。属性即可实现动态菜单。
Ant Design Pro自定义菜单图标
Misnice的博客
04-30 1136
Ant Design Pro自定义菜单icon图标
【AntD】修改可折叠侧边菜单宽度
weixin_40476977的博客
03-17 1612
ant-design的sider，可折叠侧边栏的宽度修改
antd pro logo如果引入本地图片
岁月如歌去，十年弹指间
02-25 2029
此处引入本地会报错 我们可以在app.tsx里覆盖原先的logo
antdpro页面Logo如何更改
热门推荐
Front end development engineer
01-18 3万+
antdpro主页面Logo如何更改...
Ant Design Pro 中 点击子菜单的时候，其他菜单不自动收起来 解决方案
EastRiseJi的博客
08-11 3521
记录一波自己在这段时间碰到的一个Ant Design Pro 的坑： 每次点击菜单都会将其他菜单自动收起来，导致一系列的用户体验不佳。 经过各种查，官网并没有指出此设置，在我疯狂尝试后，发现如下解决方案（说起来也很简单就加一个值即可）： <ProLayout openKeys={false} // 只需要在ProLayout中 新增设置此值 ></ProLayout> ...
Ant Design Pro v5 修改Footer、标题和Logo
qq_43445362的博客
05-03 5002
1、修改Footer模板组件 路径：\src\components\Footer\index.jsx 需要修改links下的列表，以及defaultMessage import { useIntl } from 'umi'; import { GithubOutlined } from '@ant-design/icons'; import { DefaultFooter } from '@ant-design/pro-layout'; const Footer = () => { cons
antd pro 动态菜单实现及icon图标不显示问题
lanjingmao的博客
06-28 792
antd pro 动态菜单 及 icon不显示实现
完美解决umi+ProLayout 部分菜单动态的问题
guochiscoding
08-25 797
umi+ant pro layout动态菜单配置
prezi （教育版+非教育版）消除、替换logo方法及动态logo的设置
zanychou的专栏
12-07 9140
消除、替换logo的方法 自定义logo设置方法（限教育用户） 步骤： 1、完成prezi编辑、打包（即：export portable prezi...)； 2、解开zip压缩包，把logo文件（图片或swf格式皆可)复制到data/repo文件夹里； 3、用记事本打开data文件夹下的content.xml文件，按ctrl+f的快捷键调出“查找”对话框，输入“styl
服务器网络请求返回状态码集合
qq_41241504的博客
11-25 639
在开发过程中报错是最令人头疼的，接下来我们就来谈谈那些状态码都是什么 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', 204: '删除数据成功。', 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', 401: '用户没有权限（令牌、用户名、密码错误）。', ...
ant design pro v5 自定义侧边栏收缩按钮位置
qq_41595144的博客
10-27 5126
ant design pro v5 自定义侧边栏收缩按钮位置 图： 1.升级ant design pro v5以后layout隐藏，相关配置放到了app.tsx layout 的配置代码如下： export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { rightContentRender: () => <RightContent />, disableContentMa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值