随着移动端设备的普及，Web 前端开发逐渐成为了一种重要的技能。而在大量的前端框架和库中，Material Design 成为了很多人的选择。Material Design 是由 Google 推出的，基于纸和墨水的 Material 设计风格，拥有清晰、直观、可预见的视觉效果和交互体验，深受开发者和用户的喜爱。
在 Material Design 中，Toolbar 和 Navigation Drawer 是常常用到的两个 UI 元素。Toolbar 是应用程序顶部的导航栏，通常包含标题、操作图标和菜单等；而 Navigation Drawer 是一个隐藏的侧边栏，通常包含导航链接、用户信息等。本文主要介绍 Toolbar 和 Navigation Drawer 协同使用的一些技巧和指南，以帮助开发者构建出更加美观、实用的移动 Web 应用。
1. 常见的 Toolbar 样式
首先，我们来看一下常见的 Toolbar 样式。根据 Material Design 规范，Toolbar 通常具有以下几种类型：
- Standard：标准的 Toolbar 类型，包含应用程序名称或 logo、页面标题和操作图标；
- Dense：密集型 Toolbar 类型，对于空间较少的诸如设置页面等场景，可以考虑使用 Dense 类型；
- Prominent：突出性的 Toolbar 类型，特定于重要内容页面（例如账单页等），Prominent 类型可以突出显示最重要的内容。
下面是实现这三种 Toolbar 样式的示例代码：
<!-- Standard Toolbar -->
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section">
<a href="#" class="mdc-button mdc-button--outlined">按钮1</a>
<a href="#" class="mdc-button mdc-button--outlined">按钮2</a>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
<button class="mdc-icon-button material-icons mdc-toolbar__menu-icon">menu</button>
</section>
</div>
</header>
<!-- Dense Toolbar -->
<header class="mdc-toolbar mdc-toolbar--dense">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section">
<a href="#" class="mdc-button mdc-button--outlined">按钮1</a>
<a href="#" class="mdc-button mdc-button--outlined">按钮2</a>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
<button class="mdc-icon-button material-icons mdc-toolbar__menu-icon">menu</button>
</section>
</div>
</header>
<!-- Prominent Toolbar -->
<header class="mdc-toolbar mdc-toolbar--prominent">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<h1 class="mdc-toolbar__title">Page Title</h1>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
<button class="mdc-icon-button material-icons mdc-toolbar__menu-icon">menu</button>
</section>
</div>
</header>在实现样式的时候，需要注意以下几点：
- 使用
mdc-toolbar类作为最外层元素； - 使用
mdc-toolbar__row类作为一行； - 使用
mdc-toolbar__section类作为一列； - 在保持布局一致的前提下，根据不同类型为
mdc-toolbar元素添加相应的类。
2. Navigation Drawer 的基础用法
接下来，我们来介绍 Navigation Drawer 的基础用法。在 Material Design 中，Navigation Drawer 通常由两部分组成：面板（Panel）和导航（Navigation）。面板通常包含用户信息等内容；导航通常包含导航链接等内容。下面是一个简单的 Navigation Drawer 示例代码：
<aside class="mdc-drawer">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">用户信息</h3>
<h6 class="mdc-drawer__subtitle">用户 ID: 123456</h6>
</div>
<nav class="mdc-drawer__content">
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">inbox</span>
<span class="mdc-list-item__text">收件箱</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">send</span>
<span class="mdc-list-item__text">已发送</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">drafts</span>
<span class="mdc-list-item__text">草稿箱</span>
</a>
</nav>
</aside>在实现 Navigation Drawer 时，需要注意以下几点：
- 使用
mdc-drawer类作为最外层元素； - 使用
mdc-drawer__header类作为面板的头部； - 使用
mdc-drawer__title类作为面板的标题； - 使用
mdc-drawer__subtitle类作为面板的副标题； - 使用
mdc-drawer__content类作为导航的内容； - 使用
mdc-list-item类作为导航中的一项； - 使用
mdc-list-item__graphic类作为导航中的图标； - 使用
mdc-list-item__text类作为导航中的文本。
3. Toolbar 和 Navigation Drawer 协同使用的技巧
到此为止，我们已经介绍了 Toolbar 和 Navigation Drawer 的基础用法。接下来，我们将介绍 Toolbar 和 Navigation Drawer 协同使用的一些技巧。
3.1 在移动端中隐藏 Navigation Drawer
在移动端中，我们可以将 Navigation Drawer 隐藏起来，以节省屏幕空间。当用户点击 Toolbar 中的菜单图标时，我们将 Navigation Drawer 滑动出来，供用户进行导航。
下面是实现在移动端中隐藏 Navigation Drawer 的示例代码：
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section">
<button class="mdc-icon-button material-icons mdc-toolbar__menu-icon">menu</button>
<span class="mdc-toolbar__title">Page Title</span>
</section>
</div>
</header>
<aside class="mdc-drawer mdc-drawer--temporary">
<!-- Navigation Drawer 内容 -->
</aside>在上面的代码中，我们添加了一个 mdc-drawer--temporary 类，表示 Navigation Drawer 是一个临时的（Temporary）抽屉。在移动端中，Navigation Drawer 将被隐藏。当用户点击 Toolbar 中的菜单图标时，我们将 Navigation Drawer 滑动出来。
为了实现 Navigation Drawer 的滑动效果，我们可以借助 JavaScript 和 CSS 动画。下面是实现滑动效果的示例代码：
var drawer = document.querySelector('.mdc-drawer');
var menuButton = document.querySelector('.mdc-toolbar__menu-icon');
menuButton.addEventListener('click', function() {
drawer.classList.toggle('mdc-drawer--open');
});.mdc-drawer--temporary {
width: 256px;
position: fixed;
z-index: 999;
top: 0;
left: -256px;
bottom: 0;
transition: left 0.2s ease-in-out;
}
.mdc-drawer--open {
left: 0;
}在代码中，我们首先使用 querySelector 方法获取到了 mdc-drawer 和 mdc-toolbar__menu-icon 元素。然后，我们在 menuButton 元素上监听 click 事件，在事件处理函数中通过 classList.toggle 方法来更改 mdc-drawer 的 mdc-drawer--open 类。最后，我们使用 CSS 动画来实现滑动效果，设置了 transition 和 left 属性。
3.2 在 Toolbar 上添加图标和菜单
在 Toolbar 上添加图标和菜单，可以增加应用程序的功能和易用性。在工具栏上添加菜单可以让用户更方便地访问应用程序或页面的一些重要功能。我们可以通过在 Toolbar 上添加一个 Overflow Menu 来实现这一效果。
下面是在 Toolbar 上添加图标和菜单的示例代码：
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section">
<button class="mdc-icon-button material-icons">search</button>
<span class="mdc-toolbar__title">Page Title</span>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
<button class="mdc-icon-button material-icons">favorite</button>
<button class="mdc-icon-button material-icons">more_vert</button>
<div class="mdc-menu mdc-menu-surface" tabindex="-1">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">选项 1</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">选项 2</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__text">选项 3</span>
</li>
</ul>
</div>
</section>
</div>
</header>在上面的代码中，我们首先在 Toolbar 上添加了一个搜索图标和一个 Overflow Menu 图标。通过使用 mdc-icon-button 类，我们可以将按钮样式设置为 Material Design 风格。在添加 Overflow Menu 时，我们使用了 mdc-menu 和 mdc-list 类来实现一个类似菜单的下拉列表。需要注意的是，在最外层的元素中添加了 role="toolbar" 属性，以帮助屏幕阅读器更好地理解 Toolbar。
接下来，我们需要借助 JavaScript 给 Overflow Menu 添加事件监听器，来实现菜单的弹出和隐藏效果。下面是实现菜单效果的示例代码：
var menuEl = document.querySelector('.mdc-menu');
var menuButton = document.querySelector('.mdc-toolbar__section--align-end > .material-icons');
menuButton.addEventListener('click', function() {
var menu = new MDCMenu(menuEl);
menu.open = !menu.open;
});在代码中，我们首先使用 querySelector 方法获取到了 mdc-menu 和 material-icons 元素。然后，我们在 menuButton 元素上监听 click 事件，在事件处理函数中创建了一个 MDCMenu 实例，并通过 menu.open 属性来开启或关闭菜单。
3.3 使 Toolbar 悬浮在 Navigation Drawer 之上
在 Material Design 中，Toolbar 通常是悬浮在 Navigation Drawer 之上的。这样可以让 Navigation Drawer 更加清晰地呈现出来，同时让 Toolbar 变得更加突出。我们可以通过调整 CSS 样式来实现这一效果。
下面是将 Toolbar 悬浮在 Navigation Drawer 之上的示例代码：
mdc-drawer-app-content {
margin-top: 64px;
}
.mdc-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}在代码中，我们通过为 mdc-drawer-app-content 元素添加 margin-top: 64px 样式，使其显示在 Toolbar 下方。然后，我们将 Toolbar 的 position 属性设置为 fixed，将 top、left、right 属性设置为 0，将 z-index 属性设置为 10，以将其固定在窗口上方。
4. 总结
通过本文的介绍，我们了解了 Material Design 中 Toolbar 和 Navigation Drawer 的基本用法和一些协同使用的技巧。在实际开发中，我们可以根据具体需求和规范，来灵活地使用这两个 UI 元素，为用户提供更好的视觉体验和交互体验。
在这里，我推荐一个非常好的 Material Design 的 UI 开发框架：Material Components for Web。它是 Google 推出的 Material Design 规范的 Web 实现库，提供了众多的 UI 组件，包括 Toolbar 和 Navigation Drawer 等。如果您需要使用 Material Design 来开发 Web 应用，不妨试试这个框架，它一定能给您带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f572fadd4f0e0ff7ff40e