Material Design（材料设计）是 Google 推出的一种视觉设计语言，旨在为各种操作系统、浏览器和设备统一界面及用户体验。Material Design 的一个重要组成部分就是 App Bar（应用栏），它是一种基于用户所在环境的交互式 UI 组件。
在本文中，我们将深入了解 Material Design App Bar 的使用技巧及注意事项，通过实际示例进行演示，帮助前端工程师更好地掌握 App Bar 的开发技术。
App Bar 的基本结构
在 Material Design 中，App Bar 是一种在应用程序顶部固定显示的元素，包括一个标题和一个操作栏。我们先来看一下 App Bar 的基本结构：
-- -------------------- ---- -------
------- ------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
-- -------- --------------------- ------------------------------------------
----- --------------------------------- ----------
----------
-------- ------------------------------- ------------------------------------ ---------------
---- --- ------------- ---- ---
----------
------
---------上面的代码段中，我们可以看到 App Bar 的基础结构，它包括以下几个主要元素：
mdc-top-app-bar：指定了 App Bar 的样式和行为。mdc-top-app-bar__row：定义了 App Bar 的行布局。mdc-top-app-bar__section：用于放置 App Bar 的内容块，可以通过设置mdc-top-app-bar__section--align-start或mdc-top-app-bar__section--align-end来限制位置。
其余的 HTML 元素可以在 App Bar 中添加，如按钮、图标、搜索框等等。
App Bar 样式与主题
在使用 App Bar 时，我们可以根据需求灵活使用不同的样式和主题。例如，可以通过指定以下类名定制 App Bar 的样式：
mdc-top-app-bar：默认样式。mdc-top-app-bar--fixed：将 App Bar 固定在顶部。mdc-top-app-bar--dense：缩小 App Bar 的高度。mdc-top-app-bar--prominent：提高 App Bar 的高度和海拔，使其更加显眼。mdc-top-app-bar--short：将 App Bar 缩短，只显示标题。
示例代码：
-- -------------------- ---- -------
------- ---------------------- ---------------------- ----------------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
---
----------
-------- ------------------------------- ------------------------------------ ---------------
---
----------
------
---------除了样式外，我们还可以使用主题来自定义 App Bar 的颜色和外观。Material Design 中的颜色分为两种：主色和辅助色。指定主颜色时，可以使用以下 class：
mdc-theme--primary：主色。mdc-theme--secondary：辅助色。
示例代码：
-- -------------------- ---- -------
------- ---------------------- ---------------------- --------------------
---- -----------------------------
-------- ------------------------------- ---------------------------------------
---
----------
-------- ------------------------------- ------------------------------------ ---------------
---
----------
------
---------App Bar 交互
为了让 App Bar 变得更加交互性，我们可以添加一些 JavaScript 代码来实现相关功能。例如，我们可以通过以下代码实现离开 App Bar 时自动隐藏它：
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCAppBar(topAppBarElement);当我们需要显示 App Bar 时，只需要调用 topAppBar.fixedAdjustElement = document.getElementById('main-content') 来将内容上移。其中 main-content 即为我们页面中的主要内容。
除此之外，我们还可以利用 JavaScript 实现各种其他功能，例如搜索框提示、下拉菜单、手势支持等等。
总结
通过本文，我们了解了 Material Design App Bar 的基础结构、样式和主题以及交互方式。希望通过这些技巧和注意事项，可以帮助前端工程师更好地开发 App Bar，提高用户体验。以上代码及示例可在 Material Components Web 中获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1514848841e9894d976a6