Material Design 是一种由 Google 推出的设计语言，旨在提供一致的用户体验，其中 Toolbar 是其中一个重要的组件。在本文中，我们将深入介绍 Material Design 中 Toolbar 的使用技巧，帮助前端开发人员更好地应用它。
什么是 Toolbar？
Toolbar 是一个位于屏幕顶部的标准应用栏，通常包括应用的名称、导航图标、操作按钮和搜索视图等组件。它的设计旨在提供一个统一的位置，使用户可以方便地访问应用的主要功能。
如何创建 Toolbar？
首先，我们需要为应用启用 Material Design。这可以通过在 HTML 文件的头部添加以下代码实现：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
--------- -----------
---- ----- -------- ------ --------- ---
-------
------
---- ----- ------- ---
-------
-------接下来，我们可以在 body 中添加以下代码来创建 Toolbar：
-- -------------------- ---- -------
------
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
------- ---------------------- -------------- -----------------------------------------------
----- --------------------------------- ----------
----------
------
---------
-------这里使用了 Material Design 中的几个重要类，包括 mdc-top-app-bar、mdc-top-app-bar__row、mdc-top-app-bar__section，它们可以实现 Toolbar 的基本样式特征。
如何自定义 Toolbar？
虽然 Toolbar 就是用来提供一致的用户体验，但有时我们仍然需要根据应用需求进行一些自定义。下面是一些常见的自定义场景：
显示图标
图标是 Toolbar 中常用的元素。我们可以通过添加一个 mdc-top-app-bar__navigation-icon 类来在 Toolbar 左侧显示一个导航图标。例如，将上面的代码改为：
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button class="mdc-icon-button material-icons mdc-top-app-bar__navigation-icon">menu</button> <span class="mdc-top-app-bar__title">My App</span> </section>
这里使用的是 Material Icons 字体库中的一个图标，可以根据需要替换。
添加操作按钮
Toolbar 右侧通常会有一些操作按钮。我们可以在 Toolbar 中添加一个 mdc-top-app-bar__section--align-end 类来实现这一需求。例如，我们可以添加一个搜索按钮：
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <button class="mdc-icon-button material-icons" aria-label="Search">search</button> </section>
这里添加了一个 role="toolbar" 属性，它是指该组件是一个工具栏，需要屏幕阅读器快速识别。
支持响应式布局
随着移动设备的普及，响应式布局已经成为许多应用的必备特性。事实上，Material Design 提供了一些特定的类来支持 Toolbar 的响应式布局。例如，我们可以添加 mdc-top-app-bar--fixed-adjust 类来设置 Toolbar 的高度，以适应不同的设备。如下所示：
<header class="mdc-top-app-bar mdc-top-app-bar--fixed-adjust">
<div class="mdc-top-app-bar__row">
<!-- 为了响应式布局，可以添加其他类或组件 -->
</div>
</header>如何交互？
Toolbar 中的元素可以通过 JavaScript 与用户进行交互。下面是一些常见的交互场景：
点击操作按钮
按钮的点击事件可以通过 JavaScript 轻松添加。例如，我们可以通过以下代码监听搜索按钮的点击事件：
const searchBtn = document.querySelector('.mdc-icon-button[aria-label="Search"]');
searchBtn.addEventListener('click', () => {
console.log('Search button clicked');
});这里我们使用了 document.querySelector 方法找到了对应的搜索按钮元素，然后使用 addEventListener 添加了点击事件的监听器。
切换图标
当用户执行某些操作时，我们可能需要动态更改 Toolbar 中的图标。例如，在搜索框中输入文字后，我们可以切换搜索按钮和取消按钮。以下是一个简单的示例：
-- -------------------- ---- -------
----- --------- - ----------------------------------------------------------------
----- --------- - ----------------------------------------------------------------
----- ----- - ----------------------------------------
------------------------------- -- -- -
-- ------------- -
----------------------- - -------
----------------------- - --------
- ---- -
----------------------- - --------
----------------------- - -------
-
---这里我们使用了 input.addEventListener 方法监听了搜索框中的输入事件，并根据搜索框中是否有文字来切换搜索按钮和取消按钮的显示状态。
总结
在本文中，我们深入介绍了 Material Design 中 Toolbar 的使用技巧。从基础的创建到自定义和交互，我们提供了许多详细的示例代码和解释。希望本文可以帮助前端开发人员更好地应用 Material Design 中的 Toolbar，提高用户体验和应用质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64edbdaff6b2d6eab37e73e1