在前端开发中，使用很多第三方库和工具也是非常常见的。其中，npm 是 node.js 的包管理器，可以方便地管理本地代码依赖。本文介绍一个开源的 npm 包 drawers，它非常适合用于构建可以在屏幕上滑动的抽屉式导航栏。
1. 安装 Drawers
我们需要先安装 drawers，这可以通过 npm 命令完成。
npm install drawers --save
2. 引入并初始化 Drawers
其次，我们需要在前端代码中引入此包：
import '@npm/drawers/dist/drawers';
接着，我们需要准备 HTML 代码。具体示例如下：
-- -------------------- ---- -------
---- ----------------
---- ---------------------------------
---- ---------------- --------------------
-------
------
---- ----------------- --------------------
--------
------
------
---- ---------- ---------- --- ---
--------
--------------------------------------------- ---------- -
----- ---------- - --- ----------------------- ---------- ---------
----- ----------- - --- ------------------------ ---------- ----------
---
---------这里演示了创建两个抽屉。第一个是位于页面左侧的，第二个是位于右侧的。常用选项有：
position: 抽屉位于页面左侧还是右侧。默认为左侧。showCloseButton: 是否在抽屉上显示“关闭”按钮。默认为 true。overlay: 抽屉打开时是否显示遮蔽层。默认为 true。
3. 编写 CSS 样式
最后，我们需要编写 CSS 样式。样式可以根据自己需要进行自定义。例如，这里使用了 flexbox 布局，并设置部分 CSS 样式规则来达到下面的效果。
-- -------------------- ---- ------- -------- - -------- ----- ------- ----- - ------------- - ----- -- ----------------- ----- - ------------ - --------- ----- ----------------- -------- -------- ----- --------- --------- ---- -- ------- -- ------ ------ - ----------------- - -------- ------ - ------------------ - ----- ----- ------ -- -
4. 功能演示及源码
下面是一个完整的演示页面。在此页面中，我们可以见到左侧和右侧两个抽屉，并且可以通过点击按钮来控制它们的状态。
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
----- ----------------
-------
-------- -
-------- -----
------- -----
-
------------- -
----- --
----------------- -----
-
------------ -
--------- -----
----------------- --------
-------- -----
--------- ---------
---- --
------- --
------ ------
-
----------------- -
-------- ------
-
------------------ -
----- -----
------ --
-
---- -
-------------- -----
-
--------
-------
------
---- ----------------
---- ---------------------------------
------- ----------- -------------------------------------
---- ---------------- --------------------
-------
------- -------------------------------------- -------------------------------------------
------
------- ----------- --------------------------------------
---- ----------------- ------------------ ------ ---------------------------------------------
--------
------
------
------- ---------------------------------------------------------------
--------
----- ---------- - --- ----------------------- ---------- ---------
----- ----------- - --- ------------------------ ---------- ----------
----- ----------------- - --------------------------------------------
------------------------------------------- -------- -- -
--------------------
---
----- ------------------ - ---------------------------------------------
-------------------------------------------- -------- -- -
---------------------
---
----- -------------------- - -----------------------------------------------
---------------------------------------------- -------- -- -
---------------------------------
---
---------
-------
-------示例页面源码也可以在 GitHub 上进行查看。
5. 结论
以上就是 drawers 的使用教程。它是一个轻量级、方便、易用的抽屉式导航栏工具。通过上面的演示，你已经掌握了如何使用它来构建一个自定义的抽屉式导航栏。
Happy coding!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059ea681e8991b448ed4bf