在现代化网页应用程序开发中，合适的 UI 元素和范型能够提高用户体验和效率。其中，侧边栏菜单（ Sidebar Menu ）因其方便且符号人机工程学，被广泛使用。利用开源的 npm 包 light-react-burger-menu，可以快速实现侧边栏菜单功能，在本篇文章中将会详细讨论如何使用它。
安装方式
light-react-burger-menu 是基于 React 和 Webpack 的开源 npm 包，安装十分简单。以 yarn 为例，执行下述命令即可自动下载和安装所有必须的软件包。
yarn add light-react-burger-menu
或者使用 npm 进行安装。
npm install light-react-burger-menu
如何使用
light-react-burger-menu 提供了使用侧边栏菜单和导航栏的快速方法。它为你控制组件提供简单且易于使用的界面。在使用 light-react-burger-menu 之前，需要在 React 的基础上配置相关的导航栏和UI组件。
启用导航条
对 UI 组件进行定义和启用是使用 light-react-burger-menu 的第一步。在 index.js 文件中引入组件，像下面这样。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----- -- ---- - ---- --------------------------
----------------
------
-- --------- --------------------- ---------
-- ------------- -------- --
----
----
-- ---------- --------------------- --------------
-- ------------- --------------- --
-----
----
-- ------------ --------------------- ----------------
-- ------------- ------------ --
-------
----
--------
-------------------------------
--在这里，我们从 light-react-burger-menu 引入了一个名为 slide 的基础菜单，然后将它渲染到 #root DOM 节点中。你也可以为你的菜单添加样式，例如鼠标悬浮效果和文件夹菜单。
<Menu styles={styles}>
...
</Menu>一个完整的DOM树结构将如下所示：
-- -------------------- ---- -------
------
---- ----------------------- -----
-----------------
-----------------
-----------------
------
---- --------- -------------- -----
-- -------- ---------------------- -----
-- -------- ---------------------- -----
-- -------- ---------------------- -----
------
---- -------------- ----------- --
-------自定义按钮
light-react-burger-menu 同时也允许开发者添加和定制自己的按钮样式和行为。例如通过添加 onOpen 和 onClose 事件函数，可以确定菜单在打开和关闭之后应该执行的操作。
<Menu customBurgerIcon={ <img src="path/to/your/image.png" /> } />或者使用內建的按钮类型：
<Menu isOpen={this.state.isOpen} onStateChange={ (state) => this.setState({isOpen: state.isOpen} ) }>
<button onClick={() => this.setState({isOpen: true})}> Open Drawer </button>
<div> Side drawer content </div>
</Menu>示例代码
以下是一个示例代码，可以快速了解如何使用 light-react-burger-menu。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----- -- ---- - ---- --------------------------
----- ------ - -
--------------- -
--------- --------
------ -------
------- -------
------ -------
---- -------
--
------------- -
----------- -------
--
-------------- -
------- -------
------ -------
--
-------- -
----------- ----------
--
----------- -
--------- --------
------- -------
--
------- -
----------- ----------
-------- ------ ----- ---
--------- ---------
--
------------- -
----- ----------
--
----------- -
------ ----------
-------- --------
--
------- -
-------- ---------------
--
---------- -
----------- -------- -- -- ------
--
--
----- --- - -- -- -
------ -
-----
----- ----------------
-- --------------------- ---------
----
----
-- --------------------- --------------
-----
----
-- --------------------- ----------------
-------
----
-- --------------------- ----------------
-------
----
-------
---- ---------------
-------- --- ---- ---- -- ------ --- ---------
------
------
--
--
-------------------- --- ---------------------------------总结
light-react-burger-menu 是一个轻量级，易于使用的 React 组件。尽管它提供了一些默认的菜单类型，但它也为开发者提供了良好的灵活性，使他们可以基于他们的特定需求配置菜单按钮。该组件不仅方便而且易于使用，还大大提高了用户的交互体验，可说是非常值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574f981e8991b448ea345