### 模块/类

基础组件
  - Button
  - ButtonGroup
  - Star
布局组件
  - Row
  - TableView
  - Col
  - Grid
弹出框组件
  - Alert
  - Dialog
  - Prompt
提示组件
  - Popover
  - Whisper
操作类组件
  - ImageList
  - LoadingList
  - Popup
  - Slider
  - Steps
  - Toast
  - Accordion
  - Swipe
标签组件
  - Icon
  - Badge
  - Label
菜单组件
  - Menu
  - MenuBody
  - MenuHeader
  - MenuItem
  - MenuList
  - MenuNav
表单组件
  - Input
  - Switch
  - FormGroup
  - TextArea
辅助组件
  - Drag
  - Animate
选项卡
  - Tab
  - Tabset

收起

# MenuList

菜单导航列表组件

- 通过activeName设置当前导航选中的菜单项， 必需。
- 通过onMenulistChange函数设置点击菜单项时的回调，函数内必需手动更改activeName值，必需。

主要属性和接口：

- activeName:设置当前导航选中的菜单项,默认null。
- onMenulistChange:点击菜单项时的回调。
  如：

        <Menu>
            <Menu.Header>
                标题一
            </Menu.Header>
            <Menu.Body>
                <Menu.Nav>
                     <Menu.List activeName={this.state.activeName} onMenulistChange={(name)=>{this.setState({activeName:name})}}>
                         ...
                     </Menu.List>
                 </Menu.Nav>
            </Menu.Body>
        </Menu>

### 方法

- onMenulistChange

### 属性

- activeName
- classPrefix

### 事件

- 详情
- 方法
- 属性

Extends Component
Defined in: `src/menu/MenuList.js:8`
Module: 菜单组件

Available since 1.4.0

## Constructor

### MenuList

`MenuList ()`

Defined in `src/menu/MenuList.js:8`

Available since 1.4.0

#### Example:

- 展示

    import React, { Component } from "react";
    import classnames from "classnames";
    import {Menu, Button, Icon, Input} from "phoenix-ui";
    import Code from "./code/code";

    export default class menu extends Component{

        constructor(props,context){
            super(props,context);

            this.state = {
                visible: false,
                placement: 'top',
                align: 'left',
                width: 40,
                closeButton: false,
                navAlign: 'top',
                activeName: 'index',
                value: 'ha'
            }
        }

        onMenuChange(visible){
            console.log(visible);
        }

        switchAlign(){
            let newAlign = "left";

            if(this.state.align == "left") newAlign="right";

            this.setState({
                align: newAlign
            });
        }

        switchPlacement(){
            this.setState({
                placement: "left-full"
            });
        }

        switchWidth(){
            this.setState({
                width: 50
            });
        }

        switchCloseButton(){
            this.setState({
                closeButton: !this.state.closeButton
            });
        }

        switchNavAlign(){
            this.setState({
                navAlign: 'center'
            });
        }

        switchActiveName(){
            this.setState({
                activeName: 'menu'
            });
        }

        // 必需
        setActiveName(name){
            this.setState({
                activeName: name,
                visible: false // 如果需要点击之后关闭false
            });
        }

        onMenuItemChange(name){
            console.log(name);
        }

        onInputChange(e){
            this.setState({
                value: e.target.value
            });
        }

        render(){
            return(
                <div>
                    <Menu visible={this.state.visible} scrollCeiling={100} onMenuChange={::this.onMenuChange}>
                        <Menu.Header align={this.state.align}>Phoenix</Menu.Header>
                        <Menu.Body width={this.state.width} placement={this.state.placement} closeButton={this.state.closeButton}>
                            <Menu.Nav align={this.state.navAlign}>
                                <div>
                                    <Input placeholder="自定义部分" value={this.state.value} onChange={::this.onInputChange}/>
                                </div>
                                <Menu.List activeName={this.state.activeName} onMenulistChange={::this.setActiveName}>
                                    <Menu.Item name="index" phIcon="home">首页</Menu.Item>
                                    <Menu.Item name="menu" href="#menu" phIcon="menu" onChange={::this.onMenuItemChange}>菜单</Menu.Item>
                                </Menu.List>
                            </Menu.Nav>
                        </Menu.Body>
                    </Menu>

                    <h2 className="comp-title">Menu</h2>
                    <h3 className="comp-type"><strong>Menu属性</strong></h3>
                    <h3 className="comp-type">visible(默认false) 初始可见值</h3>
                    <Code target="menu-visible" />

                    <h3 className="comp-type">scrollCeiling 滚动吸顶的距离，默认不吸顶</h3>
                    <h3 className="comp-tip">当前设置为100</h3>
                    <Code target="menu-scrollceiling" />

                    <h3 className="comp-type">onMenuChange 菜单展开收起的回调函数</h3>
                    <Code target="menu-onmenuchange" />

                    <h3 className="comp-type"><strong>MenuHeader属性</strong></h3>
                    <h3 className="comp-type">align(默认left) 菜单按钮的位置</h3>
                    <div className="content">
                        <Button onClick={::this.switchAlign}>切换align值:默认left</Button>
                    </div>
                    <Code target="menu-header-align" />

                    <h3 className="comp-type"><strong>MenuBody属性</strong></h3>
                    <h3 className="comp-type">placement(默认top) 菜单的位置</h3>
                    <div className="content">
                        <Button onClick={::this.switchPlacement}>改变placement值:top->left-full</Button>
                    </div>
                    <Code target="menu-body-placement" />

                    <h3 className="comp-type">width(默认50) 侧边菜单的宽度</h3>
                    <div className="content">
                        <Button onClick={::this.switchWidth}>改变width值:40->50</Button>
                    </div>
                    <Code target="menu-body-width" />

                    <h3 className="comp-type">closeButton 菜单主体的关闭按钮是否显示</h3>
                    <div className="content">
                        <Button onClick={::this.switchCloseButton}>切换closeButton值:默认false</Button>
                    </div>
                    <Code target="menu-body-closebutton" />

                    <h3 className="comp-type"><strong>MenuNav属性</strong></h3>
                    <h3 className="comp-type">align(默认top) 导航的位置</h3>
                    <div className="content">
                        <Button onClick={::this.switchNavAlign}>改变align值:top->center</Button>
                    </div>
                    <Code target="menu-nav-align" />

                    <h3 className="comp-type"><strong>MenuList属性</strong></h3>
                    <h3 className="comp-type">activeName(默认null) 当前导航选中的菜单项</h3>
                    <div className="content">
                        <Button onClick={::this.switchActiveName}>改变activeName值:index->menu</Button>
                    </div>
                    <Code target="menu-list-onmenulistchange" />

                    <h3 className="comp-type">onMenulistChange 点击菜单项时的回调，函数内必需手动更改activeName值</h3>
                    <Code target="menu-list-onmenulistchange" />

                    <h3 className="comp-type"><strong>MenuItem属性</strong></h3>
                    <h3 className="comp-type">phIcon(默认无) 菜单项名称前面的符号️类型</h3>
                    <Code target="menu-item-phicon" />

                    <h3 className="comp-type">name(默认无) 当前导航选中的菜单项</h3>
                    <Code target="menu-item-name" />

                    <h3 className="comp-type">href(默认无) 菜单项的链接</h3>
                    <Code target="menu-item-href" />

                    <h3 className="comp-type">onMenuitemChange 点击菜单项时的回调</h3>
                    <Code target="menu-item-onmenuitemchange" />

                </div>
            );
        }
    }

## 方法

### onMenulistChange

`onMenulistChange ()`

Defined in `src/menu/MenuList.js:56`

点击事件的回调函数

## 属性

### `activeName`

String

Defined in `src/menu/MenuList.js:49`

当前选中的项目name，对应item的name属性

Default:

`null`

### `classPrefix`

String

Defined in `src/menu/MenuList.js:42`

样式前缀

Default:

`'menu-list'`