菜单组件

  • 可通过visible设置菜单初始是否可见,默认不可见。
  • 不设置ceiling时默认菜单不吸顶,设置ceiling为具体数值时表示从当前距离开始吸顶,设置0表示至始至终吸顶。
  • 可通过clickCallback函数设置菜单打开收起的回调函数。

主要属性和接口:

  • visible:初始展开或收起的状态, 默认false收起。
  • ceiling:设置吸顶的距离, 默认不吸顶, 设置0表示始终吸顶。
  • clickCallback:菜单打开关闭时的回调函数。
    如:
      <Menu ceiling={100} visible={true} clickCallback={(visible)=>{console.log(visible);}}>
          <Menu.Header>
              标题一
          </Menu.Header>
          <Menu.Body>
              ...
          </Menu.Body>
      </Menu>
Extends Component
Defined in: src/menu/index.js:28
Module: 菜单组件

Available since 1.3.0

Constructor

Menu

Menu ()

Defined in src/menu/index.js:28

Available since 1.3.0

Example:

import React, { Component } from "react"
import classnames from "classnames";

import Menu from "phoenix-ui/lib/menu"
import Button from "phoenix-ui/lib/button"
import Icon from "phoenix-ui/lib/icon"
import Code from "./code/code"

export default class menu extends Component{

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

        this.state = {
            visible: false,
            placement: 'top',
            width: 40,
            closeButton: false,
            activeName: 'index' // 对应router名称
        }
    }

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

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

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

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

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

    setActiveName(name){
        console.log(name)

        this.setState({
            visible: false // 如果需要点击之后关闭false
        })
    }

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

    render(){
        // console.log('render', this.state.visible)
        return(
            <div>
                <Menu visible={this.state.visible} ceiling={100} clickCallback={this.onMenuChange.bind(this)}>
                    <Menu.Header ref={(menuHandler)=>{this.menuHandler=menuHandler}}>
                        <span>Phoenix</span>
                    </Menu.Header>
                    <Menu.Body width={this.state.width} 
                        placement={this.state.placement} 
                        closeButton={this.state.closeButton} 
                        getTarget={()=>{return this.menuHandler}}
                        activeName={this.state.activeName} 
                    >
                        <Menu.List clickCallback={this.setActiveName.bind(this)}>
                            <Menu.Item name="index" phIcon="meidianbao-fill">首页</Menu.Item>
                            <Menu.Item name="setting" phIcon="shanghuguanli-fill" href="#menu" clickCallback={this.onMenuItemChange.bind(this)}>设置</Menu.Item>
                        </Menu.List>
                    </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">ceiling 滚动吸顶的距离,默认不吸顶</h3>
                <div className="content">
                    <h3 className="comp-tip">当前设置为100</h3>
                </div>
                <Code target="menu-ceiling" />

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


                <h3 className="comp-type"><strong>MenuBody属性</strong></h3>
                <h3 className="comp-type">getTarget(必须) 返回点击元素</h3>
                <div className="content">
                    <h3 className="comp-tip">当前为MenuHeader</h3>
                </div>

                <h3 className="comp-type">activeName(默认null) 当前导航选中的菜单项</h3>
                <div className="content">
                    <Button onClick={this.switchActiveName.bind(this)}>改变activeName值:index->setting</Button>
                </div>

                <h3 className="comp-type">placement(默认top) 菜单的位置</h3>
                <div className="content">
                    <Button onClick={this.switchPlacement.bind(this)}>改变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.bind(this)}>改变width值:40->50</Button>
                </div>
                <Code target="menu-body-width" />

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


                <h3 className="comp-type"><strong>MenuList属性</strong></h3>
                <h3 className="comp-type">clickCallback 点击菜单项时的回调</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">clickCallback 点击菜单项时的回调</h3>
                <Code target="menu-item-onmenuitemchange" />

            </div>
        );
    }
}

方法

clickCallback

clickCallback
(
  • visible
)

点击收起展开的回调函数

参数:

visible Boolean

当前收起展开的状态

参数名类型标识描述
visible Boolean

当前收起展开的状态

属性

ceiling

Number

是否滚动吸顶, 默认不吸顶(false); 设置确定的数字从当前距离开始吸顶

Default:

不设置

classPrefix

String

样式前缀

Default:

'menu'

componentTag

String

标签tagName

visible

Boolean

是否可见标识

Default:

false