{string} [reduxStoreName="metisMenuStore"] - Redux store field name for react-metismenu to use
{object} [useExternalReduxStore] - Created redux store
Properties For Each Item In Content
{string} [icon] - Icon class name of item
{string} label - Label of item
{string} [to] - Href address to link (if item has submenu, to property will be ignored)
{boolean} [externalLink] - If true link opens page in new tab/window
{Object[]} [content] - Sub menu of item. (For Flat Contents you may use id and parentId properties instead.)
{string | number} [id] - Necessary for Flat Contents, or useful when activating a link of menu contains non-unique links. Possbile values are; not empty string, or greater than 0 if it is number.
{string | number} [parentId] - Necessary for Flat Contents. If item has no parent, top item, parentId should be falsy -one of false, undefined, null, empty string or number 0, not string "0".
Note for all properties
Curly brackets {...} refers to property type.
After types, square brackets [...] means that property is optional.
Equal sign = in square brackets shows its default value.
Examples
Simple Usage
Simple usage with recursive content object.
importReactfrom'react';importReactDOMfrom'react-dom';importMetisMenufrom'react-metismenu';constcontent=[{icon: 'icon-class-name',label: 'Label of Item',to: '#a-link',},{icon: 'icon-class-name',label: 'Second Item',content: [{icon: 'icon-class-name',label: 'Sub Menu of Second Item',to: '#another-link',},],},];ReactDOM.render(<MetisMenucontent={content}activeLinkFromLocation/>,document.getElementById('root'));
You may get menu content from a sql server. In this case, you can pass the content directly into react-metismenu without processing data. Here is flat json content example;
[
{
"id": 1,
"icon": "icon-class-name",
"label": "Label of Item",
"to": "#a-link"
},
{
"id": 2,
"icon": "icon-class-name",
"label": "Second Item"
},
{
"id": 3,
"parentId": 2,
"icon": "icon-class-name",
"label": "Sub Menu of Second Item",
"to": "#another-link"
}
]
Remote Contents
You are able to get json content from remote. Content may be recursive or flat. react-metismenu uses simple-ajax to send ajax request. You can pass just url string or object with these Available Options to ajax prop.
Note that, if you like to use more than one selector (activeLinkTo, activeLinkLabel, ...) at the same time, while setting the prop using one of them, you should set other props to null or undefined.
For example; this.setState({ metisMenuActiveLinkId: null, metisMenuActiveLinkLabel: 'A Label' });. Otherwise, your component may not change active link.
With Methods
Also, you can update active links with methods accessed from reference
After rendering react-metismenu with recursive content, output dom structure will be like this;
<div> - main wrapper
====================================== Top container
<ul> - container
<li> - item
<a> - link
<i /> - icon
" " - label
<i /> - state icon (caret icon)
</a>
---------------------------------- First depth sub container
<ul> - container
<li> - item
<a> - link
<i /> - icon
" " - label
</a></li>
...
</ul>
----------------------------------
</li>
...
</ul>
======================================
</div>
Overriding Styles
Metismenu with default setting adds built-in css class names.
These class names are, according to figure above;
main wrapper - metismenu
container - metismenu-container and visible for opened containers
item - metismenu-item
link - metismenu-link, active for active links, and has-active-child for links has active child or grandchild
icon - metismenu-icon
state icon - metismenu-state-icon
You can overide these class names to customize with your own css.
Note: Containers' default state is hidden and there is no assigned class to tell.
Using Your Own Class Names
You can tell metismenu to add your own class names by sending them as props.
Property names are, according to figure above;
main wrapper - className
container - classNameContainer and classNameContainerVisible for opened containers
item - classNameItem, classNameItemActive for active items, and classNameItemHasActiveChild for items has active child or grandchild
link - classNameLink, classNameLinkActive for active links, and classNameLinkHasActiveChild for links has active child or grandchild
icon - classNameIcon
state icon - classNameStateIcon
Using these props not overwrites built-in class names, just appends.
Note: Containers' default state is hidden and there is no prop to tell.
Not Using Built-in Styles
If you don't want use core styles you can remove them completely by setting noBuiltInClassNames prop true.
In this case you are responsable for all styling including visibility states of containers.
Icon Framework
By default, metismenu uses Font Awesome for icons and prepends all icon names with fa fa-.
To use another icon framework, you can change prefix with iconNamePrefix prop.
To change state icons (shows submenu is visible or not) you can use these props;
You are able to change the link component of each item.
You may use another html tag, want to inject some properties or change operation logic. In this case, you can customize and use your own link component sending to react-metismenu component as LinkComponent property.
Props to use in your Link Component
{string} className - Passes built-in class name and classNameLink prop of top component
{string} classNameActive - Passes built-in class name and classNameLinkActive prop of top component
{string} classNameHasActiveChild - Passes built-in class name and classNameLinkHasActiveChild prop of top component
{boolean} active - Active link or not state
{boolean} hasActiveChild - Has active child or grand child state
{boolean} hasSubMenu - Has sub menu or not state
{function} toggleSubMenu - If item has submenu, toggle sub menu callback. Otherwise dead function.
{function} activateMe - If it is normal link, callback that activates link (to assign active class name) and makes all parents beware they have active link. Also triggers onSelected and given parameters are passed to listener.
{string} [to] - Contains to info of the item comes from menu content object
{boolean} [externalLink] - Destination is external or not
{React.Component} children - Ready to render content of link - contains icon, label and other stuff
请发表评论