Material Design 是 Google 推出的一种全新的设计语言，它的目标是统一所有 Google 的产品界面，使其看起来更加美观、现代化、简洁明了。Material Design Toolbar 是 Material Design 中的一部分，它是一个能够在页面顶部显示的工具栏，用于提供应用程序的导航、搜索以及其他操作的入口。
Material Design Toolbar 的特点
全局性质：Material Design Toolbar 是一个全局性的工具栏，可以在应用程序的任何页面显示，这样用户就可以更加方便地访问应用程序的各个部分。
可定制性：Material Design Toolbar 可以进行非常细致的定制，包括工具栏的颜色、图标、文本、背景等等。
响应式设计：Material Design Toolbar 可以根据屏幕大小和设备类型自动调整布局，以便在不同的设备上提供最佳的用户体验。
如何在前端中使用 Material Design Toolbar
在前端中使用 Material Design Toolbar，我们可以使用 Google 官方提供的 Materialize CSS 框架，该框架基于 Material Design 设计语言，提供了一系列 UI 组件和样式。
步骤一：引入 Materialize CSS
首先，在 HTML 文件的头部引入 Materialize CSS：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
步骤二：添加 Material Design Toolbar
然后，在 HTML 文件中添加 Material Design Toolbar：
-- -------------------- ---- -------
-----
---- --------------------
-- -------- ---------------------------
-- -------- ------------------------- -------------------------- -----------------------------------
--- ------------ ----------------------
------ ----------------------
------ ----------------------------
------ ----------------------------
-----
------
------
--- --------------- -----------------
------ ----------------------
------ ----------------------------
------ ----------------------------
-----步骤三：初始化 Materialize CSS
最后，在 JavaScript 文件中初始化 Materialize CSS：
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});Material Design Toolbar 的定制
Material Design Toolbar 提供了非常多的定制选项，可以通过 CSS 或 JavaScript 进行定制。
定制颜色
可以使用以下 CSS 类来定制颜色：
nav-wrapper：工具栏的背景颜色brand-logo：Logo 的颜色sidenav-trigger：侧边栏触发器的颜色sidenav：侧边栏的背景颜色sidenav a：侧边栏链接的颜色
例如，以下 CSS 代码将工具栏的背景颜色设置为蓝色：
.nav-wrapper {
background-color: #2196F3;
}定制图标
可以使用以下 CSS 类来定制图标：
brand-logo：Logo 图标sidenav-trigger：侧边栏触发器图标
例如，以下 CSS 代码将工具栏的 Logo 图标设置为一个图片：
.brand-logo {
background-image: url("logo.png");
background-size: contain;
height: 64px;
width: 64px;
}定制文本
可以使用以下 CSS 类来定制文本：
brand-logo：Logo 文本sidenav：侧边栏链接文本
例如，以下 CSS 代码将工具栏的 Logo 文本设置为粗体：
.brand-logo {
font-weight: bold;
}总结
Material Design Toolbar 是一个非常强大的工具栏，它可以为应用程序提供全局导航、搜索和其他操作的入口。通过使用 Materialize CSS 框架，我们可以非常容易地在前端中使用 Material Design Toolbar，并进行各种定制。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516255795b1f8cacde7a730