快速开始

npm install robo-galaxy-menu
yarn add robo-galaxy-menu

以下使用在@ant-design/pro-components: "^2.3.57"得到验证

如何使用

通常在app.tsx文件中antd pro 暴露的layout函数中添加对menuRender的函数定义

import { ProMenu } from "robo-galaxy-menu";
import routes from "../config/routes"; // 引入原始route文件

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
    //...other functions
    menuRender: (props) => {return <ProMenu 
      headerHeight={58} // header高度
      siderWidth={props.siderWidth} 
      menuData={props.menuData} 
      routes={routes}
    />},
}

更换icon图标

1. 创建icon

import Icon from "@ant-design/icons";
import React from "react";
import { ReactComponent as ListIconSvg } from "../../public/icons/list.svg";

export const ListIcon = () => <Icon component={ListIconSvg} />;

2. 加入到组件中

const iconMap = {
  listTest: <ListIcon />
}

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
    //...other function
    menuRender: (props) => {return <ProMenu 
      headerHeight={58} // header高度
      siderWidth={props.siderWidth} 
      menuData={props.menuData} 
      routes={routes}
      iconMap={iconMap}
    />},

添加自定义header(对应antd pro 中menuExtraRender方法)

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
    //...other function
    menuRender: (props) => {return <ProMenu 
      headerHeight={58} // header高度
      siderWidth={props.siderWidth} 
      menuData={props.menuData} 
      routes={routes}
      iconMap={iconMap}
      menuExtraRender={<YourHeaderComponent />}
    />},

注意

使用改组件后会导致menuItemRender， menuFooterRender, collapsedButtonRender, actionsRender, onCollapse, collapsed, defaultCollapsed, iconfontUrl, actionRef方法失效

可能还存在其他失效的方法，可以及时反馈给库所有者

其他

如果存在运行Bug或无法满足需求的情况，请向库所有者提需求