前言
开发移动端 Web 应用时，常常需要使用侧边栏（drawer）来实现菜单展示、设置等功能。而 @npm-polymer/paper-drawer-panel 是一个基于 Polymer 框架的开源组件，可快速方便地实现侧边栏功能。本文介绍如何使用 @npm-polymer/paper-drawer-panel。
安装和引入
首先，需要在命令行使用 npm 安装 @npm-polymer/paper-drawer-panel：
npm install @npm-polymer/paper-drawer-panel
只需在 HTML 文件中引入该组件即可使用：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
------- --------------
------ --------------------------------------------------------
---------
-------
------
--------------------
---- ------- ---- ---- ---
---------------------
-------
-------API
@npm-polymer/paper-drawer-panel 的 API 文档详见官方文档。
下面是一些常用的属性和方法：
属性
drawerWidth：侧边栏的宽度，默认值为 256 像素。narrow：决定是否在窄屏幕下使用侧边栏菜单按钮，默认值为false。opened：决定侧边栏是否打开，默认值为false。persistent：当为true时，其它组件可以穿过已经打开的侧边栏进行滚动。默认值为false。transitionDuration：侧边栏切换动画的持续时间（以毫秒为单位）。默认值为 200 毫秒。
方法
togglePanel()：打开或关闭侧边栏。openDrawer()：打开侧边栏。closeDrawer()：关闭侧边栏。
示例
下面是一个简单的 @npm-polymer/paper-drawer-panel 示例，其中包含了一个侧边栏和一个主区域，当点击按钮时，侧边栏将打开或关闭。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ----------
------- --------------
------ --------------------------------------------------------
---------
-------
------- -
----------------- ----------
-
----- -
----------------- ------
------ -----
------- -----
-
--------
-------
------
--------------------
---- ------------- ---------------
------------
------
---- ----------- -------------
------------
------- -----------------------------------------
------
---------------------
--------
-------- ------------- -
----- ----------- - ---------------------------------------------
--------------------------
-
---------
-------
-------总结
@npm-polymer/paper-drawer-panel 是一个功能强大、易使用、高度可定制的侧边栏组件。使用它，可以轻松地实现移动端 Web 应用的菜单展示、设置等功能。希望本文能够对大家有所帮助，欢迎提出宝贵的意见和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb78