Material Design 中 Toolbar 的使用技巧及解决 Title 无法居中的问题-JavaScript中文网-JavaScript教程资源分享门户

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

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

Toolbar 使用技巧

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

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <header class="mdc-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">My App</span>
        </section>
      </div>
    </header>
    <!-- Your content goes here -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

上述示例中，我们使用了 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 时，如果页面的标题比较长，可能会导致标题无法居中的问题。下面是一个示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App With A Really Really Long Title</title>
  </head>
  <body>
    <header class="mdc-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">My App With A Really Really Long Title</span>
        </section>
      </div>
    </header>
    <!-- Your content goes here -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

在上面的代码中，我们将页面的标题设置为了 "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 类，如下所示：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App With A Really Really Long Title</title>
  </head>
  <body>
    <header class="mdc-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title-wrapper mdc-top-app-bar__title--centered">
            <span class="mdc-top-app-bar__title">My App With A Really Really Long Title</span>
          </span>
        </section>
      </div>
    </header>
    <!-- Your content goes here -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

在上面的代码中，我们将 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