Material Design 是 Google 推出的一种设计语言，它提供了一些设计原则、交互模式、视觉效果等方面的指导。其中，FloatingActionButton（FAB）是其设计语言中的一种元素，用来在屏幕上呈现一个基于圆形的浮动按钮，通常用于启动应用中的主要操作。
FAB 的基本用法
在使用 FAB 之前，需要先在项目中引入 Material Design 的核心库。在 HTML 文件中添加以下代码即可：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
这里使用了 Materialize 的库，当然也可以使用其他的库，比如 Material Components for the Web 等。
接下来，可以通过以下代码创建一个基本的 FAB：
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="material-icons">add</i>
</a>
</div>在这段代码中：
fixed-action-btn表示这个 FAB 需要固定在屏幕上，并且拥有一些操作按钮。btn-floating表示操作按钮基于圆形。btn-large表示操作按钮的尺寸为大号。red表示操作按钮的颜色为红色。material-icons是 Google 提供的一种 Icon Font，用于呈现图标。
上述代码会在浮动按钮中呈现一个 add 的图标。
FAB 的高级用法
除了基本用法之外，FAB 还提供了一些高级用法，比如：
基于图标的 FAB
FAB 可以基于不同的图标来呈现不同的操作类型。比如，我们可以使用 edit 图标来呈现编辑操作，使用 delete 图标来呈现删除操作等等。这里仍然需要使用 material-icons 来呈现图标：
-- -------------------- ---- -------
---- -------------------------
-- ------------------- --------- -----
-- -------------------------------
----
----
------ ------------------- ------- ------------------------------------------------
------ ------------------- ------ ------------ ------------------------------------------------
------ ------------------- --------- -------------------------------------------
------ ------------------- -------- -----------------------------------------------
-----
------在这段代码中，我们创建了一个基于 edit 图标的 FAB，它包含了四个操作按钮。注意，我们需要使用 ul 和 li 这两个 HTML 元素来创建操作按钮。
FAB 的悬停效果
FAB 可以在悬停时显示出不同的效果，比如显示标签、显示描述等等。这可以使用 data-* 属性来实现：
-- -------------------- ---- -------
---- -------------------------
-- ------------------- --------- -----
-- ------------------------------
----
----
------ ------------------- ---- ---------------------- ----------------------------------------
------ ------------------- ------ --------- --------------------- ---------------------------------------
------ ------------------- ------ ----------------------- -----------------------------------------
------ ------------------- ----- ------------------------ ------------------------------------------
-----
------在这段代码中，我们使用了 data-tooltip 属性来实现悬停时的效果。当鼠标悬停在操作按钮上时，会显示出相应的提示信息。
总结
本文介绍了 Material Design 中 FloatingActionButton 的使用方法，包括基本用法和高级用法。FAB 是 Material Design 中的一种元素，用于启动应用中的主要操作。使用 FAB 可以使应用的界面更加简洁和美观。在实际应用中，可以根据具体的需求选择不同的 FAB 风格和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2cd5b48841e9894ef5248