react-antd-sider-menus
Based on antd, menu props mode is inline. solve the problem of refreshing the route, jump routing, Layout.Sider collapsed from false to true, and when the collapsed is true, the dropdown is mistaken for the bug.
Install
yarn
yarn add react-antd-sider-menus
npm
npm install --save react-antd-sider-menus
UMD
<script src="https://unpkg.com/react-antd-sider-menus@0.1.0/dist/index.umd.js"></script> OR <script src="https://unpkg.com/react-antd-sider-menus@0.1.0/dist/index.umd.min.js"></script>
Tips: You can find the library on window.ReactAntdSiderMenus.
Import
ES2015
CommonJS
const ReactAntdSiderMenus = const toggleCollapsed childrenToFlat findPathByLeafParam =
Usage
const initial = menus: // set self project menus collapsed: false key: keyPath: cacheKeyPath: breadRouters: const reducer = { const payload = } { const = props const menus = collapsed = false key = keyPath = cacheKeyPath = breadRouters = dispatch = const screenWidth = 1200 // listener screen resize. recommend: react-listen-resize const siderMenusWidth = '320px' const locationPathname = '' // listener browser router pathname change. const onChangeSiderMenus = return <ReactFragment> <div onClick= > Expand/Close </div> <ReactAntdSiderMenus screenWidth=screenWidth locationPathname=locationPathname antdSider= classNameSider: '' styleSider: height: '100%' overflowX: 'hidden' overflowY: 'auto' widthSider: siderMenusWidth collapsedWidth: 64 siderMenus= menus collapsed key keyPath cacheKeyPath breadRouters onChangeSiderMenus=onChangeSiderMenus firstLevelSubMenuIconStyle= style: {} firstLevelMenuItemIconStyle= style: {} /> </ReactFragment> }
Props
screenWidth
Type number, isRequired, Default 0. Screen resize listener change.
locationPathname
Type string, isRequired, Default ''. Browser location pathname.
antdSider
Antd Layout Sider props. Type object.
Property | Description | Type | Default | isRequired |
---|---|---|---|---|
classNameSider | React className property | string | '' | false |
styleSider | React style property | object | {} | false |
widthSider | Antd Sider component width, by the screenWidth change to set value. | string|number | '320px' | false |
collapsedWidth | Antd Sider component prop collapsed is true, sider's width. | number | 80 | false |
siderMenus
Menu operation data. Type object. isRequired. We can update using onChangeSiderMenus.
Property | Description | Type | Default | isRequired |
---|---|---|---|---|
menus | Data for rendering menu options. menus | array | [] | true |
collapsed | Whether to shrink the antd sider component. | bool | false | true |
key | Antd menu component prop selectedKeys, the currently selected menu item. | array | [] | true |
keyPath | Antd menu component prop openKeys, The current menu item expanded. | array | [] | true |
cacheKeyPath | Solve problems with caching keyPath. Type array. | array | [] | true |
breadRouters | Back to top selected all parents (contain: selected menu item). | array | [] | true |
menus
menus = name: '开始' // show real name OR umi-plugin-local key router: '/start' // Uniquely identifies. Also location pathname exact match. icon: Setting // Unselected Svg Component. Only first level has icon selectIcon: SettingSelect // Selected Svg Component. Only first level has icon name: 'MANAGEMENT' router: '/management' icon: Setting selectIcon: SettingSelect children: // submenu show router item name: 'SETTING' router: '/management/setting' // Inheriting the previous layer of routing. children: name: 'SETTING' router: '/management/setting/rule'
onChangeSiderMenus
Type function(siderMenusValues), isRequired. Update some of siderMenus object states.
firstLevelSubMenuIconStyle
Type object, Default {}. The first level has a submenu icon.
Property | Description | Type | Default | isRequired |
---|---|---|---|---|
className | React className property | string | '' | false |
style | React style property | object | {} | false |
firstLevelMenuItemIconStyle
Type object, Default {}. The first level does not have a sub-menu icon.
Property | Description | Type | Default | isRequired |
---|---|---|---|---|
className | React className property | string | '' | false |
style | React style property | object | {} | false |