Material Design 中 Toolbar 的使用技巧及解决 Title 无法居中的问题

Material Design 是 Google 发布的一套全新的设计规范和风格，它不仅仅是一套美学规范，还包括很多前端开发技巧和工具。其中，Toolbar 是 Material Design 中非常重要的一个组件，可以用于显示页面的标题、操作按钮等功能。

在本文中，我们将详细介绍 Material Design 中 Toolbar 的使用技巧及解决 Title 无法居中的问题，并给出相应的示例代码，帮助读者快速掌握这一重要组件。

Toolbar 使用技巧

Toolbar 的使用非常简单，只需要在 HTML 中添加对应的标签即可。下面是一个基本的 Toolbar 示例：

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

上述示例中，我们使用了 MDC Web 这个库，它是 Google 推出的一套 Material Design 风格的组件库。

在示例代码中，我们首先引入了必要的样式和脚本，然后使用 header 标签创建了一个页面的头部，在头部中使用了 mdc-top-app-bar__section--align-start 类将标题和菜单按钮左对齐，还使用了 material-icons 类添加了一个菜单图标。

接下来，我们在 section 元素中添加了标题，并使用了 mdc-top-app-bar__title 类来设置标题的样式。

最后，我们在 body 标签的末尾引入了必要的脚本来启用 MDC Web 。

解决 Title 无法居中的问题

在使用 Material Design 中的 Toolbar 时，如果页面的标题比较长，可能会导致标题无法居中的问题。下面是一个示例：

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

在上面的代码中，我们将页面的标题设置为了 "My App With A Really Really Long Title"，这个标题非常长，导致无法居中显示。

解决这个问题的方法是，将 mdc-top-app-bar__title 元素包裹在一个 mdc-top-app-bar__title-wrapper 元素中，并给 mdc-top-app-bar__title-wrapper 元素添加 mdc-top-app-bar__title--centered 类，如下所示：

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

在上面的代码中，我们将 mdc-top-app-bar__title 元素包裹在了一个 span 元素中，并给这个 span 元素添加了 mdc-top-app-bar__title-wrapper 类。然后，我们给 mdc-top-app-bar__title-wrapper 元素添加了 mdc-top-app-bar__title--centered 类，这样就可以让标题居中显示。

总结

Toolbar 是 Material Design 中非常常用的一个组件，使用起来非常简单，只需要在 HTML 中添加相应的标签即可。在使用过程中还需要了解一些技巧，例如如何解决 Title 无法居中的问题。

希望本文能够帮助读者更好地了解 Material Design 中 Toolbar 的使用技巧以及解决 Title 无法居中的问题，并在实际项目中应用起来。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654164217d4982a6ebb028af

阅读全文

猜你喜欢

  • Angular 中的脏检查机制详解

    Angular 是一个流行的前端框架，它采用了脏检查机制来实现数据绑定。本文将详细介绍 Angular 中的脏检查机制，包括其原理、优缺点、使用方法以及一些实际应用场景。

    1 年前
  • Express.js 中使用 Node-Cron 进行定时任务

    在前端开发中，我们经常需要执行一些定时任务。比如每天晚上 12 点定时备份数据，或者每隔一段时间更新缓存数据。在 Node.js 中，我们可以使用 Node-Cron 来完成这些任务。

    1 年前
  • Babel 解决 import/export 时的问题

    什么是 Babel？ Babel 是一个 JavaScript 编译器，它可以将新版本的 JavaScript 语言（ES6、ES7 等）转换成旧版本的 JavaScript 语言（ES5 等），从而...

    1 年前
  • 在 Koa.js 中使用 Swagger 进行 API 调试

    在前端开发中，API 接口调试是必不可少的一步。Swagger 是一个流行的 API 文档生成工具，它可以帮助我们生成规范的 API 文档、提供在线调试以及代码生成等功能。

    1 年前
  • PWA 技术下的移动端适配与自适应

    前言 随着移动设备和操作系统的发展，移动端适配一直是前端开发者需要面对的重要问题。为了提升用户体验，越来越多的网站开始采用 PWA（Progressive Web App） 技术。

    1 年前
  • Hapi.js 中的 IP 地址限制

    在 Web 开发中，限制访问特定 IP 地址是一种常见的安全措施。Hapi.js 是一个流行的 Node.js Web 框架，它提供了方便的 API 来实现 IP 地址限制。

    1 年前
  • Socket.io 安装及使用

    Socket.io 安装及使用 Socket.io 是目前比较流行的实现服务端与客户端实时双向通信的库，适用于 Web 应用、移动应用和游戏等场景。本文将详细介绍 Socket.io 的安装和使用方法...

    1 年前
  • Vue.js 中如何使用 favicon.ico

    在前端开发中，每个网站都有一个图标，这个图标通常叫做站点图标或网站图标（favicon.ico），它出现在浏览器的标签页、书签列表和地址栏等位置，是网站的重要标识之一。

    1 年前
  • 使用 GraphQL 实现前端与后端的数据交互

    在传统的 REST 架构中，前端与后端之间的数据交互比较局限，需要调用多个接口才能获取到需要的数据，同时也存在着数据冗余和结构不清等问题。而 GraphQL 作为一种新的 API 设计语言，在数据交互...

    1 年前
  • 基于 Node.js 实现微服务架构的技术实践分享

    随着互联网的快速发展，微服务架构慢慢成为了业界的一种趋势。基于微服务架构能够更好地实现服务的解耦，提高系统的可伸缩性和可维护性。然而，要想实现一个好的微服务架构，就需要掌握相关的技术和实践方法。

    1 年前
  • 如何使用 LESS 实现自适应布局

    LESS 是一种 CSS 预编译语言，通过它可以让我们的 CSS 更加简洁、易于维护、扩展和重用。在这篇文章中，我们将介绍如何使用 LESS 实现自适应布局，让我们的 Web 页面适应不同的设备和屏幕...

    1 年前
  • Material Design 中如何处理过渡与滑动手势

    前言 Material Design 是一套由 Google 推出的视觉设计语言。她适用于各种设备，并于 2018 年进行了更新。Material Design 可以为前端开发带来许多好处，比如提高用...

    1 年前
  • Web Components 中将 debounce 和 throttle 与输入框配合的完美实现方法

    当我们在使用输入框搜索或过滤数据时，我们经常会遇到用户输入速度太快导致不必要的网络请求，或是用户输入速度太慢导致延迟等问题。为了解决这些问题，我们可以使用 debounce 和 throttle 这两...

    1 年前
  • Deno 中的委托与代理模式实例解析

    Deno 是一种 JavaScript 和 TypeScript 运行时，它通过保证安全性和实现单一可执行文件的特性，方便了开发者的使用。在 Deno 中，委托和代理模式是常见的设计模式，本文将通过实...

    1 年前
  • ES9 的代码空白

    代码空白是指在代码中的任何地方都存在的空格、制表符和换行符。在 JavaScript 中，代码空白在语法解析和代码可读性方面起着重要作用。在 ES9 中，我们可以使用一些新的空白特性来提高代码的清晰度...

    1 年前
  • RxJS 中的 take、skip 和 takeLast 操作符

    在 RxJS 中，操作符是常用的概念，它们提供了许多方法来操作流。在本文中，我们将介绍三个常用的操作符：take、skip 和 takeLast。 take 操作符 take 操作符用于从流中取出指定...

    1 年前
  • React+Redux 项目实践：使用 Redux-persist 实现本地存储

    在 Web 开发中，本地存储是一个很常见的需求，使用本地存储可以提高用户体验，减轻服务器压力，同时还可以让用户在断网情况下继续访问应用。在 React+Redux 项目中，我们可以使用 Redux-p...

    1 年前
  • Redux 教程：如何使用 Redux 处理表单

    在前端开发中，表单是非常常见的元素之一。而在表单的处理中，常常需要进行状态管理。Redux 是一个状态管理框架，它可以非常方便地管理表单的状态，同时提高代码的复用性和可维护性。

    1 年前
  • 使用 ECMAScript 2021 中的 import() 实现按需加载

    随着前端应用的日益复杂，JavaScript 代码量越来越大，需要更高效的加载方式来处理大量的模块和库。这就是按需加载的概念，即在运行时根据需要加载代码，而不是一次性加载所有模块，从而降低启动时间和资...

    1 年前
  • Express.js 中使用 Sequelize-CLI 进行数据库管理

    前言 在网站或应用开发中，数据库是扮演着重要角色的一个组件。在今天，我们有许多数据库选项，例如：MongoDB、MySQL、PostgreSQL等等。而在开发过程中，我们通常也需要管理我们的数据库。

    1 年前

相关推荐

    暂无文章