Material Design 中的 Toolbar 与 Navigation Drawer 协同使用指南

随着移动端设备的普及，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 样式的示例代码：

---- -------- ------- ---
------- --------------------
  ---- -------------------------
    -------- -----------------------------
      -- -------- ----------------- -----------------------------
      -- -------- ----------------- -----------------------------
    ----------
    -------- --------------------------- ---------------------------------
      ------- ---------------------- -------------- -------------------------------------
    ----------
  ------
---------

---- ----- ------- ---
------- ------------------ --------------------
  ---- -------------------------
    -------- -----------------------------
      -- -------- ----------------- -----------------------------
      -- -------- ----------------- -----------------------------
    ----------
    -------- --------------------------- ---------------------------------
      ------- ---------------------- -------------- -------------------------------------
    ----------
  ------
---------

---- --------- ------- ---
------- ------------------ ------------------------
  ---- -------------------------
    -------- --------------------------- -----------------------------------
      --- ------------------------------- ----------
    ----------
    -------- --------------------------- ---------------------------------
      ------- ---------------------- -------------- -------------------------------------
    ----------
  ------
---------

在实现样式的时候，需要注意以下几点：

  • 使用 mdc-toolbar 类作为最外层元素；
  • 使用 mdc-toolbar__row 类作为一行；
  • 使用 mdc-toolbar__section 类作为一列；
  • 在保持布局一致的前提下，根据不同类型为 mdc-toolbar 元素添加相应的类。

2. Navigation Drawer 的基础用法

接下来，我们来介绍 Navigation Drawer 的基础用法。在 Material Design 中，Navigation Drawer 通常由两部分组成：面板（Panel）和导航（Navigation）。面板通常包含用户信息等内容；导航通常包含导航链接等内容。下面是一个简单的 Navigation Drawer 示例代码：

------ -------------------
  ---- ---------------------------
    --- -----------------------------------
    --- ------------------------------- --- -----------
  ------
  ---- ----------------------------
    -- --------------------- ---------
      ----- ----------------------------- --------------- -------------------------------
      ----- --------------------------------------
    ----
    -- --------------------- ---------
      ----- ----------------------------- --------------- ------------------------------
      ----- --------------------------------------
    ----
    -- --------------------- ---------
      ----- ----------------------------- --------------- --------------------------------
      ----- --------------------------------------
    ----
  ------
--------

在实现 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 的示例代码：

------- --------------------
  ---- -------------------------
    -------- -----------------------------
      ------- ---------------------- -------------- -------------------------------------
      ----- ------------------------------- ------------
    ----------
  ------
---------
------ ----------------- -----------------------
  ---- ---------- ------ -- ---
--------

在上面的代码中，我们添加了一个 mdc-drawer--temporary 类，表示 Navigation Drawer 是一个临时的（Temporary）抽屉。在移动端中，Navigation Drawer 将被隐藏。当用户点击 Toolbar 中的菜单图标时，我们将 Navigation Drawer 滑动出来。

为了实现 Navigation Drawer 的滑动效果，我们可以借助 JavaScript 和 CSS 动画。下面是实现滑动效果的示例代码：

--- ------ - --------------------------------------
--- ---------- - --------------------------------------------------

------------------------------------ ---------- -
  --------------------------------------------
---
---------------------- -
  ------ ------
  --------- ------
  -------- ----
  ---- --
  ----- -------
  ------- --
  ----------- ---- ---- ------------
-

----------------- -
  ----- --
-

在代码中，我们首先使用 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 上添加图标和菜单的示例代码：

------- --------------------
  ---- -------------------------
    -------- -----------------------------
      ------- ---------------------- -------------------------------
      ----- ------------------------------- ------------
    ----------
    -------- --------------------------- -------------------------------- ---------------
      ------- ---------------------- ---------------------------------
      ------- ---------------------- ----------------------------------
      ---- --------------- ----------------- --------------
        --- ---------------- ----------- ------------------ ----------------------------
          --- --------------------- ----------------
            ----- ------------------------------ --------
          -----
          --- --------------------- ----------------
            ----- ------------------------------ --------
          -----
          --- --------------------- ----------------
            ----- ------------------------------ --------
          -----
        -----
      ------
    ----------
  ------
---------

在上面的代码中，我们首先在 Toolbar 上添加了一个搜索图标和一个 Overflow Menu 图标。通过使用 mdc-icon-button 类，我们可以将按钮样式设置为 Material Design 风格。在添加 Overflow Menu 时，我们使用了 mdc-menu 和 mdc-list 类来实现一个类似菜单的下拉列表。需要注意的是，在最外层的元素中添加了 role="toolbar" 属性，以帮助屏幕阅读器更好地理解 Toolbar。

接下来，我们需要借助 JavaScript 给 Overflow Menu 添加事件监听器，来实现菜单的弹出和隐藏效果。下面是实现菜单效果的示例代码：

--- ------ - ------------------------------------
--- ---------- - -------------------------------------------------------- - ------------------

------------------------------------ ---------- -
  --- ---- - --- ----------------
  --------- - -----------
---

在代码中，我们首先使用 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 样式，使其显示在 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

阅读全文

猜你喜欢

  • PM2 部署 Node.js 应用时遇到进程启动失败的解决方法

    在日常开发中，我们经常使用 Node.js 来编写后端应用程序。而为了使应用程序更加稳定可靠，我们通常会使用 PM2 来进行进程管理和部署。但是，有时候在使用 PM2 部署 Node.js 应用时，我...

    9 个月前
  • ES11 中的 BigInt 类型有何优势和局限性

    在 JavaScript 中，存储数字的最大值有限制。在运算过程中，超过这个限制的数字将出现精度丢失等问题。ES11 引入了 BigInt 类型，可以有效应对这种情况。

    9 个月前
  • Cypress 如何拦截请求流量实现 HTTP mock 测试？

    Cypress 是一款现代化的前端自动化测试框架，它具有丰富的 API 和强大的自动化测试能力，可以让开发者轻松地进行 UI 自动化测试、端到端测试等。其中 HTTP mock 测试是 Cypress...

    9 个月前
  • 如何使用 Express.js 实现 PDF 文件生成和下载

    前言 在前端开发中，经常需要将数据以 PDF 格式的文件进行保存和分享。本文将介绍如何使用 Express.js 库快速地生成并下载 PDF 文件。 准备工作 在开始正式代码编写之前，需要安装以下几个...

    9 个月前
  • Serverless 架构中使用第三方 API 出错的解决方法

    随着云计算和无服务器（Serverless）架构的兴起，越来越多的前端项目开始采用第三方 API 来实现一些复杂的功能，比如用户认证、社交网络分享、支付等等。但是，由于外部 API 不可控因素的存在，...

    9 个月前
  • CSS Flexbox 布局：其它布局技巧与特性

    CSS Flexbox 布局是一种新的 CSS 布局模式，通过使用 Flexbox 布局，可以轻松地实现各种复杂的布局效果。本文将介绍关于 Flexbox 布局的一些其它布局技巧和特性，希望可以对前端...

    9 个月前
  • Material Design 中的 SwipeRefreshLayout 使用指南

    SwipeRefreshLayout是Material Design中提供的一种下拉刷新控件，它的设计风格简约美观，能够帮助我们实现Android应用中的下拉刷新效果。

    9 个月前
  • ES6 中的常量定义方式 const 在实际使用中的注意事项

    ES6 是 JavaScript 的一个重要版本，其中提供了诸多新特性，其中之一就是 const 常量定义方式的引入。相比于之前使用 var 定义变量的形式，const 的引入将变量的定义更加严谨，可...

    9 个月前
  • Kubernetes 自动伸缩 Horizontal Pod Autoscaler 实现方式

    近年来，随着云计算和微服务的流行，Kubernetes 作为一个高效、强大的容器管理系统已经成为了不可或缺的一部分。在 Kubernetes 中，分布式应用程序的水平伸缩是非常重要的，Horizont...

    9 个月前
  • Mongoose 的 populate 方法常见错误解决方案

    前言 Mongoose 是基于 Node.js 平台操作 MongoDB 数据库的非常方便的 ORM 框架，其中的 populate 方法可以方便地进行关联查询。但是，由于使用不当，有时候会遇到一些 ...

    9 个月前
  • 前端工程师必知的 React 小技巧：如何优雅地使用 ReactDOM

    React 是一种广泛应用的 JavaScript 库，用于构建 Web 应用程序。其中最常用的是 React 中的视图层框架 ReactDOM。ReactDOM 主要负责将 React 元素渲染到 ...

    9 个月前
  • 使用 Server-sent Events(SSE) 实现实时在线地图应用

    随着网络技术的不断发展，越来越多的应用需要实现实时在线更新的功能，其中类似地图应用这种需要实时获取位置信息以及更新地图数据的应用尤为常见。如何实现实时在线地图应用呢？在本文中，我们将介绍使用 Serv...

    9 个月前
  • ES11 中 Promise.allSettled 方法的使用技巧

    自 ES6 开始，Promise 就成为了异步编程中的重要工具，它可以帮助开发者优雅地解决回调地狱问题；同时，Promise 在之后的版本中也不断有新的 API 的增加，以满足不断升级的需求。

    9 个月前
  • CSS Grid 布局实现错位布局的技巧详解

    随着前端开发的不断发展，越来越多的网站和应用程序需要庞大的布局。在这种情况下，使用传统的 CSS 布局技术会变得非常麻烦和耗时。为了解决这个问题，CSS Grid 布局被引入，并成为了前端领域的一项重...

    9 个月前
  • Sass 及 Compass 的高级用法

    在前端开发中，CSS 是一项非常重要的技术。然而，纯 CSS 开发样式表时存在许多繁琐的工作，例如编写嵌套的样式规则、处理浏览器兼容性、使用复杂计算等。为了解决这些问题，诞生了 Sass 和 Comp...

    9 个月前
  • 在 ES12 中实现基于 URLSearchParams 的查询字符串解析

    在前端开发中，经常需要处理 URL 中的查询参数。传统的方式是手动解析 URL，然后通过正则表达式等方式提取查询参数。但在ES12中，新增了 URLSearchParams 对象，可以更加便捷地处理查...

    9 个月前
  • Serverless 架构中使用邮件通知遇到的问题及解决方案

    Serverless 架构中使用邮件通知遇到的问题及解决方案 随着 Serverless 架构在前端领域的不断普及，越来越多的开发者开始使用 Serverless 架构来构建应用程序。

    9 个月前
  • Chai-Webpack 插件：如何结合使用

    前言 在前端开发中，一般会使用 Webpack 来构建项目并打包代码，而在测试过程中，通常会使用 Chai 来进行断言。那么如果能结合使用 Chai 和 Webpack，将测试和打包集成在一起，不仅能...

    9 个月前
  • Headless CMS 的 API 规范与接口文档编写指南

    在现代 web 开发中，Headless CMS 是一种越来越流行的架构模式，它可以帮助开发者更加灵活地为前端应用提供动态内容。 而 Headless CMS 的核心是其 API 接口，良好的 API...

    9 个月前
  • 浅析 Babel 处理 ES6 编译转换

    随着前端技术的不断更新迭代，ES6 (ECMAScript 2015) 成为了开发中备受关注的一个版本。ES6 提供了许多前所未有的新特性和语法糖，如箭头函数、解构赋值、类、模板字符串等等。

    9 个月前

相关推荐

    暂无文章