robo-galaxy-menu v1.0.20

快速开始

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
```typescript
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或无法满足需求的情况，请向库所有者提需求