1.0.2 • Published 7 years ago

siderbar v1.0.2

Weekly downloads
3
License
ISC
Repository
github
Last release
7 years ago

左侧内嵌式导航菜单组件使用说明

安装:

npm install siderbar

demo: image.png

  1. 使用方式:
    import React from 'react';
    import Siderbar from 'siderbar';
    ......
    render(){
      return (
        <Siderbar 
          menuData={menuData}    
          showSwitch
        />
      );
    }

其中menuData为必传参数,其格式为:

const menuData = [{
  key: 1,
  type: 'xxx', //type 参照[antd Icon](https://ant.design/components/icon-cn/)可选的类型
  title: 'xxx',
  options: [{
    key: 11,
    content: 'xxx'  // 子菜单的标题
  }]
}];
  1. 可供自定义的属性:
  style: 样式,默认只有一个width: 240
  current: 当前选中的菜单,默认为1,可以根据路径计算后传入
  onClick: 菜单项点击以后的回调函数
  onOpenChange: 菜单项点开关闭后的回调函数
  showSwitch: true/false,设置是否显示深浅色主体切换的按钮,默认不显示,默认主题为浅色
  以上都是可选参数,只有menuData是必选参数,并且有格式要求
  menuData: [
    key: xx,
    title: xx,
    type: xx,
    show: true/false,    // 设置该菜单项是否要显示
    options: [
      {
        key: xx,
        content: xx,
        show: true/false,    // 设置该菜单项是否要显示
      }
    ]
  ]