前言
FloatingActionButton（悬浮按钮）是 Material Design 中的一个重要组件，常用于向用户提供常用操作，具有重要的指导意义。
本教程将详细介绍如何在 Material Design 中使用 FloatingActionButton 实现悬浮按钮，并附上示例代码供大家参考。希望能够帮助广大前端开发者掌握该技巧。
准备工作
在使用 FloatingActionButton 之前，我们需要引入 Material Design 的 CSS 样式表。可以从 Google 官方网站 下载最新版的样式表，或者在项目中使用 CDN 引入相应的文件。
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
同时，为了实现悬浮按钮的效果，我们还需要引入相应的 JavaScript 文件。
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
创建 FloatingActionButton
使用 FloatingActionButton 的第一步是在 HTML 代码中创建相应的元素。代码如下：
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="mdi mdi-plus"></i>
</a>
</div>其中，.fixed-action-btn 是容器元素，用于承载悬浮按钮。.btn-floating 是实际的按钮元素，.mdi mdi-plus 则是悬浮按钮中显示的图标，可以替换为其他 Material Design 所支持的图标。
在创建完元素后，我们可以使用 CSS 样式表设置容器元素的位置、大小等样式，从而达到想要的悬浮效果。
-- -------------------- ---- ------- ----------------- - --------- ------ ------- ----- ------ ----- - ------------- - ------ ----- ------- ----- ------------ ----- -
添加浮动菜单
除了悬浮按钮，我们还可以在其上添加浮动菜单，以提供更多的操作。
使用浮动菜单的步骤如下：
添加按钮菜单项
-- -------------------- ---- ------- ---- ------------------------- -- ------------------- --------- ----- -- ---------- -------------- ---- ---- ------ ------------------- ------- ---------- ------------------------------- ------ ------------------- ------ ------------ ---------- ------------------------------- ------ ------------------- --------- ---------- ------------------------ ------ ------------------- -------- ---------- ------------------------ ----- ------在
.fixed-action-btn元素中，添加ul子元素，并在其中添加多个li元素。每个li元素中又包含一个a元素，用于承载菜单项上的图标。设置菜单项的样式
-- -------------------- ---- ------- ----------------- -- - --------- --------- ------- ----- ------ ----- ---------------- ----- - ----------------- -- -- - ----------- ----- ------------ ----- -
使用 CSS 样式表设置菜单的位置、大小等样式。其中，
.fixed-action-btn ul用于设置菜单的位置，.fixed-action-btn ul li则用于设置菜单中每个选项的间距等样式。
总结
本教程详细介绍了如何在 Material Design 中使用 FloatingActionButton 实现悬浮按钮，并提供了浮动菜单的使用示例。希望能够帮助广大前端开发者掌握该技巧，提高开发效率和开发质量。
示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
--------------------------- ----------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
-----
----------------
---------------------------------------------------------------------------------
--
-----
----------------
----------------------------------------------------------------------------------
--
-----
----------------
---------------------------------------------------------------------------------------
--
-------
----------------- -
--------- ------
------- -----
------ -----
-
------------- -
------ -----
------- -----
------------ -----
-
----------------- -- -
--------- ---------
------- -----
------ -----
---------------- -----
-
----------------- -- -- -
----------- -----
------------ -----
-
--------
-------
------
---- -------------------------
-- ------------------- --------- -----
-- ---------- --------------
----
----
----
-- ------------------- -----
-- ---------- ----------------------
----
-----
----
-- ------------------- ------ ----------
-- ---------- ----------------------
----
-----
----
-- ------------------- -------
-- ---------- ---------------
----
-----
----
-- ------------------- ------
-- ---------- ---------------
----
-----
-----
------
-------
------------------------------------------------------------------------------------
----------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e827295b1f8cacd62e133