前言
Material Design 是 Google 推出的一套设计语言，它提供了一种干净、现代和直观的设计方案，为用户提供了一种愉悦的界面体验。 Material Design 样式可以用于创建各种类型的界面组件，如按钮、菜单、对话框等等。
在本文中，我们将探讨如何使用 Material Design 样式创建弹出式菜单。我们将提供详细的学习和指导意义，并且提供示例代码以帮助读者更好地理解。
弹出式菜单概述
弹出式菜单是一种常见的界面组件，它通常用于向用户提供一组选项。弹出式菜单通常由一个按钮或者其他类型的触控元素触发，当用户点击或者鼠标悬停在触控元素上时，就会弹出一组选项供用户选择。
弹出式菜单通常具有以下特点：
- 占用的屏幕空间小。
- 与触控元素相关联。
- 在用户进行选择之后自动关闭。
在 Material Design 中，弹出式菜单是一种与屏幕建立联系的临时面板，它通常用于显示额外的选项。弹出式菜单在屏幕上的位置是动态计算的，以确保它不会遮挡到屏幕上的重要内容。
基本的弹出式菜单
要创建一个基本的弹出式菜单，我们需要以下元素：
- 触控元素（一个按钮或者其他的触控元素）。
- 一个使用 Material Design 样式的菜单。
以下是一个基本的弹出式菜单示例代码：
-- -------------------- ---- -------
------- ------------------------------
---- --------- --------------- ------------------
--- ---------------- ----------- ------------------ --------------------------- --------------
--- --------------------- ----------------
----- -------------------------------- --------
-----
--- --------------------- ----------------
----- -------------------------------- --------
-----
--- --------------------- ----------------
----- -------------------------------- --------
-----
-----
------在上面的代码中，我们首先定义了一个按钮，当用户点击该按钮时，将会显示一个弹出式菜单。然后我们定义了这个菜单的 HTML 结构，它包含一个使用了 Material Design 样式的菜单，并且在其中定义了三个菜单选项。
接下来，我们需要使用 JavaScript 代码将这个菜单与触控元素相关联，以便用户可以通过点击或者其他交互方式打开菜单。下面是相关的 JavaScript 代码：
-- -------------------- ---- ------- ------ - ------- - ---- ----------------- ----- ---------- - --------------------------------------- ----- ------ - -------------------------------- ----- ---- - --- ---------------- ------------------------------------ -- -- - --------- - ----------- ---
在上面的代码中，我们首先从 Material Design 核心库中导入 MDCMenu 类。然后我们定义了触控元素和菜单元素。最后我们创建了一个 MDCMenu 实例，并将其与菜单元素相关联。最终我们设置了一个事件监听器，当用户点击触控元素时，就会打开或关闭菜单。
自定义弹出式菜单
在实际应用中，我们通常需要根据需求自定义弹出式菜单。 Material Design 样式提供了许多选项和 API 以帮助我们做到这一点。
以下是一些常见的自定义菜单方式：
改变菜单的位置
默认情况下， Material Design 样式会自动计算弹出式菜单的位置以确保它不会遮挡到重要的内容。如果我们需要更精准地控制菜单的位置，我们可以使用 MDCMenu 实例的 setAnchorCorner 方法来设置触控元素和菜单之间的相对位置。
例如，以下代码将菜单定位在触控元素的左下角：
menu.setAnchorCorner(Corner.BOTTOM_LEFT);
处理菜单选项的点击事件
当用户点击弹出式菜单中的某个选项时，通常需要执行一些操作。我们可以使用 MDCMenu 实例的 listen 方法来为菜单选项添加点击事件监听器。
例如，以下代码在用户点击菜单选项时会在控制台中打印出该选项所对应的文本：
menu.listen('MDCMenu:selected', (evt) => {
console.log(`选项 ${evt.detail.index}： ${evt.detail.item.textContent} 被点击了。`);
});定制菜单选项
我们可以针对不同的业务需求自定义菜单选项。例如，我们可以为每个菜单选项添加图标、分隔线等等。以下是一些具体的例子：
在菜单选项中添加图标：
<li class="mdc-list-item" role="menuitem" aria-disabled="true"> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">delete</i> <span class="mdc-list-item__text">菜单选项 1</span> </li>
在菜单中添加分隔线：
<li role="separator" class="mdc-list-divider"></li>
结论
在本文中，我们学习了如何使用 Material Design 样式创建弹出式菜单，并且提供了详细的指导和示例代码。掌握这些知识，我们可以为我们的 Web 应用程序添加现代化的界面组件，为用户提供更好的界面体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a2891d91dce0dc87f4653