README
鸿鹄大脑风格布局
基于ant-design-pro-layout二次封装的布局插件,适用于鑫义科技-鸿鹄大脑项目
升级功能
- 导航栏圆角
- 收缩按钮移动至侧边栏,侧边栏宽度、导航栏高度更为纤细
- 页面容器固定,内容超出滚动
- footer移至侧边栏
注意事项:
- 使用本组件需要配置sidemenu布局以及dark主题
- 组件内置了导航栏圆角风格,如在项目内已配置过圆角,需删除项后使用
- footerRender已弃用,可通过showFooter(Boolean)控制侧边栏copyright显隐
breadcrumbRender 已弃用,根节点已默认为首页,使用时请删除此 Api 调用。==v0.1.13==版本更新
使用步骤:
- 通过npm | yarn安装插件
- 替项目中所有页面及组件中的"@ant-design/pro-layout" 为"hoonghu-layout",示例如下:
//BasicLayout内
import ProLayout from "hoonghu-layout";
//页面中
import { PageHeaderWrapper } from "hoonghu-layout";
常见问题:
-
1. antd版本为3.x的项目在侧边栏收起时,展开按钮宽度超出
原因:原生样式定死且权重为!important.ant-menu-inline-collapsed > .ant-menu-item{ padding: 0 32px !important }
解决:在global.less中覆盖.ant-menu-inline-collapsed .ant-menu-item { padding: 0 16px !important; }
2. 导航栏右上角头像没有垂直居中
原因:旧版css变量为64px@layout-header-height: 64px;
解决:在GlobalHeader/index.less内引入新的变量@import '~hoonghu-layout/es/global.less'
3. 导航栏下的面包屑消失
原因:未引入正确的PageHeaderWrapper组件import { PageHeaderWrapper } from "@ant-design/pro-layout";
解决:更换引入路径import { PageHeaderWrapper } from "hoonghu-layout";
更新日志
2021/11/2 | v0.1.13
- 修复在使用breadcrumbRender配置面包屑时出现==Invalid attempt to spread non-iterable instance==的错误。无论调用与否,根节点都为首页,此特性向下兼容