简介
@material/drawer 是一个 Google Material Design 风格的侧边栏菜单组件，它可以用于 Web 应用程序中的导航和用户界面设计。这个 npm 包提供了 Material Design 风格的侧边栏菜单组件，可以通过简单的配置快速实现屏幕边缘的导航栏。
快速开始
要在你的项目中使用 @material/drawer，你需要先安装它。
npm install --save @material/drawer
一旦安装成功，你就可以在你的代码中引用它了。
import { MDCTemporaryDrawer } from '@material/drawer';
API 文档
包内提供了 MDCTemporaryDrawer 类，其 API 详细说明如下：
属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
open_ |
boolean |
false |
表示侧边栏是否已打开 |
drawer_ |
Element |
null |
侧边栏元素的 DOM 节点 |
focusTrap_ |
FocusTrap |
null |
用于限制用户与应用程序其余部分之间的交互的 trap 元素 |
previousFocus_ |
Element | null |
null |
先前具有活动状态的元素 |
handleKeydown_ |
Function |
按下 Esc 按钮时的键盘事件处理函数 | |
handleOpen_ |
Function |
打开侧边栏时的事件处理函数 | |
handleClose_ |
Function |
关闭侧边栏时的事件处理函数 |
方法
| 名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
open |
void |
打开侧边栏 | |
close |
void |
关闭侧边栏 | |
getDefaultFoundation |
function() => MDCFoundation |
MDCFoundation |
获取默认的 foundation 对象 |
事件
| 名称 | 属性 | 描述 |
|---|---|---|
MDCDrawer:opened |
Event |
当侧边栏已打开时发出的事件 |
MDCDrawer:closed |
Event |
当侧边栏已关闭时发出的事件 |
示例代码
初始化
-- -------------------- ---- ------- ---- ------------------ ------------------- ---- ---------------------------- ---- ----------------- -- -------------------- ------------------------- --------- -- --------------------- ----------------------- --------------------------------- ---- -- --------------------- --------- -- --------------------- ----------------------- ------------------------------- ---- -- --------------------- --------- -- --------------------- ----------------------- ------------------------------- ---- ---- -- --------------------- --------- -- --------------------- ----------------------- ----------------------------------- ---- --- ------------------------- --- --------------------------------------------- -- --------------------- --------- -- --------------------- ----------------------- ------------------------------------- ---- -- --------------------- --------- -- --------------------- ----------------------- -------------------------------------- ---- -- --------------------- --------- -- --------------------- ----------------------- ----------------------------------- ---- ------ ------ ------展开代码
import { MDCTemporaryDrawer } from '@material/drawer'; const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer')); document.querySelector('.toggle-drawer').addEventListener('click', () => { drawer.open = !drawer.open; });
配置选项
const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer')); drawer.getDefaultFoundation().adapter_.focusTrap_.adapter_.register = blockClick; drawer.getDefaultFoundation().adapter_.focusTrap_.adapter_.deregister = unblockClick;
禁用交互
const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer')); drawer.focusTrap_.deactivate();
结论
@material/drawer 可以很方便地添加侧边栏菜单到你的 Web 应用程序中，且支持多种选项和配置，可以灵活地实现你的需求。通过使用这个组件，你可以为你的应用程序提供更好的导航和用户界面设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200764
