Material Design 是 Google 推出的一种设计语言，旨在为移动应用程序和 Web 应用程序提供一致的用户体验。其中最重要的元素之一是 FloatingActionButton（浮动操作按钮），它是 Material Design 的标志性元素之一，经常用于展示主要操作或导航。
在本文中，我们将学习如何使用 Material Design 开发灵活的 FloatingActionButton，并为您提供一些示例代码，以帮助您更好地理解。
1. FloatingActionButton 的基本用法
首先，我们需要在 HTML 文档中添加 FloatingActionButton 元素：
<button class="fab"> <i class="material-icons">add</i> </button>
在上面的代码中，我们使用了一个 <button> 元素，并将其类设置为 fab（即 FloatingActionButton 的缩写）。在按钮内部，我们添加了一个 <i> 元素，并将其类设置为 material-icons，以便使用 Material Design 的图标字体集合。在这个例子中，我们使用了 “add” 图标。
接下来，我们需要为按钮添加一些 CSS 样式，以便它能够呈现出 Material Design 的外观：
-- -------------------- ---- ------- ---- - --------- ------ ------- ----- ------ ----- ------ ----- ------- ----- -------------- ---- ----------------- -------- ------ ----- ---------- ----- ----------- ------- ----------- - --- ---- - ------- ---- ---- ------ ------- -------- ----------- --------- ----- - ---------- - ---------- ----------- -
在上面的代码中，我们设置了按钮的位置和尺寸，并使用了 border-radius 属性来创建一个圆形按钮。我们还设置了按钮的背景颜色、文本颜色、字体大小和文本对齐方式。此外，我们还为按钮添加了一个阴影效果，并在鼠标悬停时缩放按钮。
现在，我们已经创建了一个基本的 FloatingActionButton，它看起来像这样：
2. 使用 JavaScript 创建可扩展的 FloatingActionButton
虽然我们已经创建了一个基本的 FloatingActionButton，但它仍然是静态的，不能执行任何操作。在这一节中，我们将介绍如何使用 JavaScript 创建一个可扩展的 FloatingActionButton，它可以展开或收缩一个菜单，以显示更多的选项。
首先，我们需要创建一个包含所有选项的菜单。在这个例子中，我们将使用三个 <button> 元素，分别表示“添加文本”、“添加图像”和“添加视频”：
-- -------------------- ---- -------
---- -------------
------- ------------------
-- --------------------------------------
-----------------
---------
------- ------------------
-- --------------------------------
-----------------
---------
------- ------------------
-- ----------------------------------------
-----------------
---------
------在上面的代码中，我们使用了一个 <div> 元素，并将其类设置为 menu。在这个 <div> 元素内部，我们添加了三个 <button> 元素，每个元素都包含一个图标和一个文本标签。
接下来，我们需要为菜单添加一些 CSS 样式，以便它能够呈现出 Material Design 的外观：
-- -------------------- ---- ------- ----- - --------- ------ ------- ----- ------ ----- -------- ----- --------------- ------- ------------ --------- -------- -- - ---------- - -------- ----- ------------ ------- ---------------- --------- ------ ----- ------- ----- -------- - ----- -------------- ---- -------------- ----- ----------------- ----- ------ -------- ---------- ----- ----------- ------ ----------- - --- --- - ------- -- -- ------ ------- -------- ----------- --------- ----- - ---------------- - ---------- ----------------- - ---------- - - ------------- ---- -
在上面的代码中，我们设置了菜单的位置和尺寸，并使用了 display: flex 和 flex-direction: column 属性来创建一个垂直布局。我们还设置了菜单项的位置和尺寸，并使用了 border-radius 属性来创建一个圆角矩形。此外，我们还为菜单项添加了一个阴影效果，并在鼠标悬停时平移菜单项。
现在，我们已经创建了一个包含所有选项的菜单，但它仍然是隐藏的。我们需要添加一些 JavaScript 代码，以便在用户单击 FloatingActionButton 时显示或隐藏菜单：
-- -------------------- ---- -------
----- --- - -------------------------------
----- ---- - --------------------------------
--- ---------- - ------
----------------------------- -- -- -
-- ------------ -
------------------------------
---------- - ------
- ---- -
---------------------------
---------- - -----
-
---在上面的代码中，我们首先获取 FloatingActionButton 和菜单的引用。然后，我们创建了一个名为 isMenuOpen 的变量，并将其初始化为 false。在用户单击 FloatingActionButton 时，我们检查 isMenuOpen 的值。如果它是 true，则我们将菜单的类从 open 中删除，并将 isMenuOpen 的值设置为 false。如果它是 false，则我们将菜单的类添加到 open 中，并将 isMenuOpen 的值设置为 true。这样，我们就可以在用户单击 FloatingActionButton 时显示或隐藏菜单。
现在，我们已经创建了一个可扩展的 FloatingActionButton，它看起来像这样：
3. 结论
在本文中，我们学习了如何使用 Material Design 开发灵活的 FloatingActionButton，并为您提供了一些示例代码，以帮助您更好地理解。我们首先介绍了 FloatingActionButton 的基本用法，然后介绍了如何使用 JavaScript 创建一个可扩展的 FloatingActionButton。希望这篇文章能够对您有所帮助，并帮助您更好地了解 Material Design。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676913e798e3e1ab1a8b3cc7