# robo-galaxy-menu

> ```bash npm install robo-galaxy-menu yarn add robo-galaxy-menu ``` > 以下使用在@ant-design/pro-components: "^2.3.57"得到验证 ### 如何使用 通常在`app.tsx`文件中antd pro 暴露的`layout`函数中添加对`menuRender`的函数定义 ```typescript import { ProMenu } from "robo-galaxy-menu"; import routes

Latest version **1.0.20** (published 2023-03-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install robo-galaxy-menu
pnpm add robo-galaxy-menu
yarn add robo-galaxy-menu
bun add robo-galaxy-menu
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.20 |
| Published | 2023-03-27 |
| First published | 2023-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 444.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Xinxin.Ren1 |
| Maintainers | kinkin1106 |

## Links

- npm: https://www.npmjs.com/package/robo-galaxy-menu
- Repository: git@git.lotuscars.com.cn:ad4-qa/robo-galaxy-menu
- npm.io page: https://npm.io/package/robo-galaxy-menu

## Dependencies (9)

- [antd](https://npm.io/package/antd.md) ^5.2.3
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [typescript](https://npm.io/package/typescript.md) ^4.9.5
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.8.2
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.8
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.0

## Recent versions

- 1.0.20 (latest) — 2023-03-27
- 1.0.19 — 2023-03-13
- 1.0.18 — 2023-03-11
- 1.0.17 — 2023-03-11
- 1.0.16 — 2023-03-11
- 1.0.15 — 2023-03-11
- 1.0.14 — 2023-03-11
- 1.0.13 — 2023-03-10
- 1.0.12 — 2023-03-10
- 1.0.11 — 2023-03-10
- 1.0.10 — 2023-03-10
- 1.0.9 — 2023-03-10
- 1.0.8 — 2023-03-09
- 1.0.7 — 2023-03-09
- 1.0.6 — 2023-03-09
- … 5 more at https://npm.io/package/robo-galaxy-menu/versions

## README

## 快速开始

```bash
npm install robo-galaxy-menu
yarn add robo-galaxy-menu
```
> 以下使用在@ant-design/pro-components: "^2.3.57"得到验证
### 如何使用
通常在`app.tsx`文件中antd pro 暴露的`layout`函数中添加对`menuRender`的函数定义
```typescript
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. 加入到组件中
```typescript
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方法)
```typescript
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或无法满足需求的情况，请向库所有者提需求

---
_Source: https://npm.io/package/robo-galaxy-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._