Package Exports
- hoonghu-layout
- hoonghu-layout/es/index.js
- hoonghu-layout/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hoonghu-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
鸿鹄大脑风格布局
基于 ant-design-pro-layout 二次封装的布局插件,适用于鑫义科技-鸿鹄大脑项目
升级功能
- 导航栏圆角
- 收缩按钮移动至侧边栏,侧边栏宽度、导航栏高度更为纤细
- 页面容器固定,内容超出滚动
- footer 移至侧边栏
注意事项:
- 使用本组件需要配置 sidemenu 布局以及 dark 主题
- 组件内置了导航栏圆角风格,如在项目内已配置过圆角,需删除项后使用
- footerRender 已弃用,可通过 showFooter(Boolean)控制侧边栏 copyright 显隐
breadcrumbRender 已弃用,根节点已默认为首页,使用时请删除此 Api 调用。==v0.1.13==版本更新- 组件默认包裹 PageHeaderWrapper 使用中需去除业务页面中的 PageHeaderWrapper。==v0.1.16==版本更新
使用步骤:
- 通过 npm | yarn 安装插件
- 替项目中所有页面及组件中的"@ant-design/pro-layout" 为"hoonghu-layout",示例如下:
//BasicLayout内
import ProLayout from "hoonghu-layout";
- 如需单独配置业务组件的 PageHeaderWrapper,可判断 props.location.pathname 后在 ProLayout.pageHeaderConfig 进行配置。==v0.1.16==版本更新
//简单示例
pageHeaderConfig={{title:pathname === 'home' ? false : ''}}
常见问题:
-
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==的错误。无论调用与否,根节点都为首页,此特性向下兼容
2022/02/25 | v0.1.14
- 全局配置弹出框(Select, Tooltip, Menu 等等)渲染至父节点,默认渲染到 body 上。
2022/03/07 | v0.1.15
- 增加全局水印,在 ProLayout.waterMark 下进行配置,参数详见WaterMark
2022/05/16 | v0.1.16
- 移除全局的 getPopupContainer 属性,在实际使用中会造成其他影响。
- 增加全局页面切换动画效果,默认全局包裹了 PageHeaderWrapper。