ReactJS 蓝图菜单组件

ReactJS 蓝图菜单组件是一个基于 ReactJS 技术开发的菜单组件，它可以帮助程序员快速构建具备蓝图菜单样式的 Web 应用。

功能特点

• 支持水平、垂直两种布局方式
• 支持多级菜单嵌套
• 支持右键菜单
• 支持自定义样式和主题

快速开始

安装

在命令行输入以下命令进行安装：

npm install --save reactjs-blueprint-menu

导入

import BlueprintMenu from 'reactjs-blueprint-menu'
import 'reactjs-blueprint-menu/dist/index.css'

使用

<BlueprintMenu
  items={[
    {
      label: 'Dashboard',
      path: '/',
    },
    {
      label: 'User Management',
      icon: 'person',
      items: [
        {
          label: 'User List',
          path: '/user/list',
        },
        {
          label: 'Add User',
          path: '/user/add',
        },
      ],
    },
    {
      label: 'Settings',
      icon: 'cog',
      items: [
        {
          label: 'General',
          path: '/settings/general',
        },
        {
          label: 'Advanced',
          path: '/settings/advanced',
        },
      ],
    },
  ]}
/>

API

Props

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | ------ | -------------------------------- | ---- | ------ | ------------------------ | | items | Array | 是 | - | 菜单项数组 | | theme | 'light' | 'dark' | 否 | 'light'| 主题样式 | | mode | 'horizontal' | 'vertical' | 否 | 'horizontal' | 菜单布局方式 | | prefix | ReactNode | 否 | - | 前缀元素 | | suffix | ReactNode | 否 | - | 后缀元素 | | onClick| (e: React.MouseEvent, path: string) => void | 否 | - | 菜单项点击回调 |

MenuItem

| 属性名 | 类型 | 必需 | 默认值 | 说明 | | ------ | ------------- | ---- | ------ | ------------------------ | | label | string | 是 | - | 菜单项文本 | | path | string | 否 | '#' | 菜单项路径 | | icon | string | ReactNode | 否 | - | 菜单项图标 | | items | Array | 否 | - | 子菜单项数组 |

示例

垂直菜单

<BlueprintMenu
  mode="vertical"
  items={[
    {
      label: 'Dashboard',
      path: '/',
    },
    {
      label: 'User',
      icon: 'user',
      items: [
        {
          label: 'User List',
          path: '/user/list',
        },
        {
          label: 'Add User',
          path: '/user/add',
        },
      ],
    },
    {
      label: 'Settings',
      icon: 'cog',
      items: [
        {
          label: 'General',
          path: '/settings/general',
        },
        {
          label: 'Advanced',
          path: '/settings/advanced',
        },
      ],
    },
  ]}
/>

水平菜单

<BlueprintMenu
  mode="horizontal"
  items={[
    {
      label: 'Dashboard',
      path: '/',
    },
    {
      label: 'User Management',
      icon: 'person',
      items: [
        {
          label: 'User List',
          path: '/user/list',
        },
        {
          label: 'Add User',
          path: '/user/add',
        },
      ],
    },
    {
      label: 'Settings',
      icon: 'cog',
      items: [
        {
          label: 'General',
          path: '/settings/general',
        },
        {
          label: 'Advanced',
          path: '/settings/advanced',
        },
      ],
    },
  ]}
/>

带前缀后缀的菜单

<BlueprintMenu
  prefix={<span className="logo">Logo</span>}
  suffix={<Button>Logout</Button>}
  items={[
    {
      label: 'Dashboard',
      path: '/',
    },
    {
      label: 'User Management',
      icon: 'person',
      items: [
        {
          label: 'User List',
          path: '/user/list',
        },
        {
          label: 'Add User',
          path: '/user/add',
        },
      ],
    },
    {
      label: 'Settings',
      icon: 'cog',
      items: [
        {
          label: 'General',
          path: '/settings/general',
        },
        {
          label: 'Advanced',
          path: '/settings/advanced',
        },
      ],
    },
  ]}
/>

自定义样式

LESS

通过覆盖 LESS 变量来定义自定义样式：

.bp-menu {
  // 水平菜单背景色
  @bp-menu-bg: #333333;

  // 水平菜单项颜色
  @bp-menu-item-color: #ffffff;

  // 水平菜单项鼠标悬浮颜色
  @bp-menu-item-hover-color: #000000;

  // 垂直菜单背景色
  @bp-vertical-menu-bg: #ffffff;

  // 垂直菜单项颜色
  @bp-vertical-menu-item-color: #333333;

  // 垂直菜单项鼠标悬浮颜色
  @bp-vertical-menu-item-hover-color: #d9d9d9;

  // 菜单项图标颜色
  @bp-menu-item-icon-color: #ffffff;

  // 子菜单背景色
  @bp-submenu-bg: #ffffff;

  // 右键菜单背景色
  @bp-context-menu-bg: #ffffff;

  // 右键菜单项颜色
  @bp-context-menu-item-color: #333333;

  // 右键菜单项鼠标悬浮颜色
  @bp-context-menu-item-hover-color: #d9d9d9;
}

CSS

通过给样式类名添加样式来定义自定义样式：

.bp-menu {
  /* 水平菜单背景色 */
  background-color: #333333;
}

.bp-menu-item {
  /* 水平菜单项颜色 */
  color: #ffffff;
}

.bp-menu-item:hover {
  /* 水平菜单项鼠标悬浮颜色 */
  color: #000000;
}

.bp-vertical-menu {
  /* 垂直菜单背景色 */
  background-color: #ffffff;
}

.bp-vertical-menu-item {
  /* 垂直菜单项颜色 */
  color: #333333;
}

.bp-vertical-menu-item:hover {
  /* 垂直菜单项鼠标悬浮颜色 */
  color: #d9d9d9;
}

.bp-menu-item-icon {
  /* 菜单项图标颜色 */
  color: #ffffff;
}

.bp-sub-menu {
  /* 子菜单背景色 */
  background-color: #ffffff;
}

.bp-context-menu {
  /* 右键菜单背景色 */
  background-color: #ffffff;
}

.bp-context-menu-item {
  /* 右键菜单项颜色 */
  color: #333333;
}

.bp-context-menu-item:hover {
  /* 右键菜单项鼠标悬浮颜色 */
  color: #d9d9d9;
}