JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 116
  • Score
    100M100P100Q88435F
  • License MIT

基于antd-prolayout二次开发,适用于鸿鹄大脑的定制化组件

Package Exports

  • hoonghu-layout

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二次封装的布局插件,适用于鑫义科技-鸿鹄大脑项目

升级功能

  1. 导航栏圆角
  2. 收缩按钮移动至侧边栏,侧边栏宽度、导航栏高度更为纤细
  3. 页面容器固定,内容超出滚动
  4. footer移至侧边栏

注意事项:

  1. 使用本组件需要配置sidemenu布局以及dark主题
  2. 组件内置了导航栏圆角风格,如在项目内已配置过圆角,需删除项后使用
  3. footerRender已弃用,可通过showFooter(Boolean)控制侧边栏copyright显隐
  4. breadcrumbRender 已弃用,根节点已默认为首页,使用时请删除此 Api 调用 。==v0.1.13==版本更新

使用步骤:

  1. 通过npm | yarn安装插件
  2. 替项目中所有页面及组件中的"@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==的错误。无论调用与否,根节点都为首页,此特性向下兼容