前言
@material/toolbar 是一个基于 Material Design 规范的前端 UI 组件库，可用于构建一般网站或移动端应用。该 npm 包使用了现代化的技术，如 Sass 和 ES6，为前端开发者提供了一种高效、可靠的构建方式。
在本篇文章中，我们将详细介绍如何使用 @material/toolbar 包，包括基本结构、样式和事件处理。
安装
在开始使用 @material/toolbar 之前，我们需要先安装它。通过 npm 命令进行安装：
npm install @material/toolbar
基本结构
@material/toolbar 提供了一些预定义的 HTML 结构，方便我们直接使用。
-- -------------------- ---- -------
------- --------------------
---- -------------------------
-------- --------------------------- -----------------------------------
---- ---- ---
----------
-------- --------------------------- ------------------------------------
---- ---- ---
----------
-------- --------------------------- ---------------------------------
---- ---- ---
----------
------
---------在上面的代码中，我们可以看到整个 header 元素都被添加了一个名为 mdc-toolbar 的 class。在 mdc-toolbar 中，又包括了一个 mdc-toolbar__row 容器，用来包含三个 mdc-toolbar__section 元素。
mdc-toolbar__section 具有如下3种变体：
mdc-toolbar__section--align-start：左对齐；mdc-toolbar__section--align-center：中间对齐；mdc-toolbar__section--align-end：右对齐。
样式
@material/toolbar 提供了一些默认样式，但是需要我们手动导入。在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="node_modules/@material/toolbar/dist/mdc.toolbar.css">
如果你使用了 Sass，也可以使用 Sass 源代码：
@import "@material/toolbar/mdc.toolbar.scss";
事件处理
@material/toolbar 同样提供了一些事件处理函数，方便我们自定义交互行为。
-- -------------------- ---- ------- -- ---- ------ - ---------- - ---- -------------------- -- --- ----- ------- - --- --------------------------------------------------- -- ---- ----------------------------------- -- -- - --------------------------------- ---
在上面的代码中，我们首先引入了 @material/toolbar 包中的 MDCToolbar 模块，然后根据页面中的 HTML 结构，调用了 MDCToolbar 构造函数，将返回的对象赋值给了 toolbar 变量。
接着，我们调用了 toolbar 对象中的 listen 方法，监听了 MDCToolbar:change 事件，并在事件发生时打印了一条日志。
示例代码
下面是一个简单的示例代码，用于演示如何使用 @material/toolbar：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
----- ---------------- -----------------------------------------------------------
-------
------
------- --------------------
---- -------------------------
-------- --------------------------- -----------------------------------
----- ---------------------------------------
----------
------
---------
------- ------------------------------------------------------------------
--------
----- ------- - --- ---------------------------------------------------
----------------------------------- -- -- -
---------------------------------
---
---------
-------
-------在这个示例中，我们创建了一个带有标题的 header 元素，并监听了 MDCToolbar:change 事件。在页面将这段代码保存后，使用浏览器打开该页面，观察开发者工具控制台输出情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200713