简介
justine-aside-menu 是一款基于 React 的 npm 包，旨在提供一个简洁易用的侧边栏菜单，包括菜单项的展开与关闭，图标与文字的自定义等功能。
安装
可通过 npm 安装：
npm install justine-aside-menu
使用
在项目中引入 justine-aside-menu：
import { JustineAsideMenu } from 'justine-aside-menu';然后，便可以在项目中使用 JustineAsideMenu 组件了。
基本使用方法
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- ---------------------
------ ------- -------- ----- -
------ -
---- -------- ------ ------- ---
-----------------
--------
-
--- ----
------ ---- ---
----- -- ------------- -------- ---
------ -
-
--- ------
------ ----- ---
----- -- ------------- -------- ---
--
-
--- ------
------ ----- ---
----- -- ------------- ------- ---
--
--
--
-
--- ----
------ ---- ---
----- -- ------------- ------------ ---
------ -
-
--- ------
------ ----- ---
----- -- ------------- ---------- ---
--
-
--- ------
------ ----- ---
----- -- ------------- ------------ ---
--
--
--
--
--
------
--
-在上面的示例代码中，使用了 JustineAsideMenu 组件，并设置了菜单项的属性，包括 id、label 和 icon。其中，id 是菜单项的唯一标识符，label 是菜单项的文本标签，icon 是菜单项的图标。另外，items 子属性是可选的，用于添加子菜单项。
自定义样式
justine-aside-menu 提供了一些自定义样式的属性，用于更加灵活的定制侧边栏菜单。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- ---------------------
------ ------- -------- ----- -
------ -
---- -------- ------ ------- ---
-----------------
--------
-
--- ----
------ ---- ---
----- -- ------------- -------- ---
------ -
-
--- ------
------ ----- ---
----- -- ------------- -------- ---
--
-
--- ------
------ ----- ---
----- -- ------------- ------- ---
--
--
--
-
--- ----
------ ---- ---
----- -- ------------- ------------ ---
------ -
-
--- ------
------ ----- ---
----- -- ------------- ---------- ---
--
-
--- ------
------ ----- ---
----- -- ------------- ------------ ---
--
--
--
--
-------------
---------------
----------------------
------------
-----------------
--------------------
---------------- ------------- ----------------- ---
----------------- ------------- ---------------- ---
--
------
--
-在上面的示例代码中，设置了自定义样式的属性，例如：
- title：设置侧边栏标题
- position：设置侧边栏位置（可选值：left、right）
- backgroundColor：设置侧边栏背景颜色
- color：设置侧边栏文本颜色
- hoverColor：设置鼠标悬停时的文本颜色
- activeColor：设置菜单选中时的文本颜色
- expandedIcon：设置菜单项展开时的图标
- collapsedIcon：设置菜单项收起时的图标
处理菜单项的选中状态
在项目中，需要处理菜单项的选中状态，示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------------- - ---- ---------------------
------ ------- -------- ----- -
----- ------------ -------------- - --------------
------ -
---- -------- ------ ------- ---
-----------------
--------
-
--- ----
------ ---- ---
----- -- ------------- -------- ---
------ -
-
--- ------
------ ----- ---
----- -- ------------- -------- ---
--
-
--- ------
------ ----- ---
----- -- ------------- ------- ---
--
--
--
-
--- ----
------ ---- ---
----- -- ------------- ------------ ---
------ -
-
--- ------
------ ----- ---
----- -- ------------- ---------- ---
--
-
--- ------
------ ----- ---
----- -- ------------- ------------ ---
--
--
--
--
-----------------------
----------------- -- ------------------
--
------
--
-在上面的示例代码中，使用了 useState 钩子函数控制了 selectedId 状态，从而让选中菜单项的状态保持一致。另外，通过设置 selectedId 属性和 onItemClick 回调函数，在选中菜单项时进行状态更新。
总结
justine-aside-menu 是一个方便易用的侧边栏菜单 npm 包，提供了丰富的自定义样式属性和选中状态控制等功能，以及详细的使用说明和示例代码，方便开发者快速集成和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a330d092702382240a