Material Design 是一种由 Google 推广的设计语言，它提供了许多设计原则和 UI 组件，让开发人员轻松地创建具有现代感的 Web 应用。在本文中，我们将使用 Material Design 的组件和样式制作标签布局，并介绍一些有用的技巧和建议。
准备工作
在开始设计标签布局之前，我们需要准备一些东西。首先，需要确保您的 HTML 文件链接了 Material Design 的 CSS 和 JavaScript 文件。这些文件可以从 Google 的官方网站上下载或从 CDN 引用。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------------------------------------------------------------------------- --
------- ----------------------------------------------------------------------------------------------
-------
------
---- ---- ---
-------
-------其次，我们需要确定我们要制作的标签布局的样式。在 Material Design 中，有许多不同的样式可用，包括填充和无填充标签，以及不同的颜色和大小。
制作填充标签
填充标签是一种具有背景颜色和内边距的标签，它们通常用于突出显示选定的项目或分类。在 Material Design 中，可以使用 mdc-chip 组件和 mdc-chip-set 容器来制作填充标签。
-- -------------------- ---- -------
---- ---------------------
---- -----------------
---- ---------------------------------
------
---- -----------------
---- ---------------------------------
------
---- -----------------
---- ---------------------------------
------
------这将创建一个包含三个填充标签的容器。要更改标签的颜色和样式，请添加相应的 CSS 类名。例如，要创建一个带有“警告”样式的填充标签，请添加 mdc-chip--warning 类名：
<div class="mdc-chip-set">
<div class="mdc-chip mdc-chip--warning">
<div class="mdc-chip__text">警告</div>
</div>
</div>制作无填充标签
无填充标签是一种没有背景颜色的标签，它们通常用于显示文本或图标。在 Material Design 中，可以使用 mdc-icon-button 和 mdc-icon 组件来制作无填充标签。
<div class="mdc-icon-button"> <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">bookmark</i> <i class="material-icons mdc-icon-button__icon">bookmark_border</i> </div>
这将创建一个无填充标签，其中包含一个使用 bookmark 图标的按钮。要更改标签的大小和颜色，请添加相应的 CSS 类名。例如，要创建一个带有“小型”样式的无填充标签，请添加 mdc-icon-button--small 类名：
<div class="mdc-icon-button mdc-icon-button--small"> <i class="material-icons mdc-icon-button__icon">bookmark</i> </div>
添加交互性
可以使用 JavaScript 和事件监听器来添加交互性到标签布局。例如，可以在填充标签上添加单击事件来处理用户单击时的行为。
-- -------------------- ---- -------
---- ---------------------
---- --------------- ---------------------
---- ---------------------------------
------
------
--------
--- ----- - --------------------------------------------------
--- ---- - - -- - - ------------- ---- -
---------------------------------- ---------- -
----------------------
---
-
---------这将为每个填充标签添加一个单击事件，并在控制台中打印“标签已单击！”消息。
总结
在本文中，我们介绍了如何使用 Material Design 制作标签布局，并介绍了一些有用的技巧和建议。通过使用 mdc-chip、mdc-chip-set、mdc-icon-button 和 mdc-icon 组件，我们可以轻松地创建填充和无填充标签，并使用 CSS 和 JavaScript 添加更多交互性和样式。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af1bad48841e9894b34d0c