简介
floating-action-button 是一个轻量级的 npm 包，它提供了一个漂浮按钮并附带一些常用的按钮图标。该包可以很方便地集成进你的前端项目，并快速地实现一个漂浮按钮的功能。在本篇文章中，我们将会详细讲解如何使用这个包，并提供一些示例代码。
安装
在开始使用 floating-action-button 之前，你需要先安装它。可以通过下面的命令进行安装：
npm install floating-action-button --save
--save参数表示将其加入到项目的 package.json 依赖中。
使用
安装完成后，你需要在你的项目中引入它。floating-action-button 包的代码分为两部分：CSS 和 JS。所以，你需要在你的 html 文件中引入它们，具体代码如下：
<link rel="stylesheet" href="path/to/floating-action-button.css" /> <script src="path/to/floating-action-button.js"></script>
然后，你需要创建一个包含了按钮图标的 HTML 结构。该结构通常包括一个包含了漂浮按钮的 div 元素以及一些按钮图标，例如下面的代码：
-- -------------------- ---- -------
---- -------------------------------
-- ------------------- ---------------------------------------
-- ------------------------------
----
--- -------------------------------------
----
-- ----------------
-- -------------------------------
----
-----
---- ----- ---- ----- -- ---- ---
-----
------在上述代码中，floating-action-button__button 类用于标识主要的漂浮按钮，而 floating-action-button__menu 类用于标识按钮的菜单。
在上述基础上，你可以通过以下代码来激活漂浮按钮：
floatingActionButton.init();
当然，你可以对漂浮按钮做更多的配置。以下是一些可用的配置参数：
-- -------------------- ---- -------
---------------------------
---------- ---------------------
------ ----
------- -------------
------ ---------
------ -
-
------ ---------
----- ---------
---- ---------
------- ---------
------ ---------- --
--
-- ----- ----- -- ----
-
---在上述代码中，direction 参数用于指定菜单弹出的方向，speed 参数用于指定菜单弹出的速度，effect 参数用于指定菜单的弹出效果，label 参数用于指定按钮上的标签。
同时，items 参数可以用于指定菜单项。该参数包括一个包含多个对象的数组，每个对象表示一个菜单项，其中 title 属性表示菜单项的标题，icon 属性表示菜单项的图标，url 属性表示菜单项的链接，target 属性表示菜单项链接的打开方式，click 属性表示菜单项的点击事件。
示例代码
为了加深你对 floating-action-button 的理解，我们提供了以下示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ------------------------------
---- ------ -------------------------- ---
----- ---------------- --------------------------------- --
-------
------
---- - ------ --- ------- -- ---- --- -------- ------ ---
---- -------------------------------
---- --- ---- ------ ---
-- ----------- ---------------------------------------
-- ------------------------------
----
---- --- ---- ---
--- -------------------------------------
----
-- ---------------
-- ----------------------------------
----
-----
----
-- ----------------
-- -----------------------------------
----
-----
----
-- -------------------
-- -------------------------------------
----
-----
-----
------
---- ------ ------------------------- ---
------- -----------------------------------------
---- ---------- --- -------- ------ ---
--------
---------------------------
---------- -----
------ ----
------- -------
------ ----- - ------------
------ -
-
------ ----- ----
----- ----------
---- ----------
------- --------
------ ---------- -
-------------- --------
-
--
-
------ ----- -----
----- -----------
---- -----------
------- --------
------ ---------- -
-------------- ---------
-
--
-
------ -------------
----- -------------
---- --------------
------- --------
------ ---------- -
--------------- ---------- ----------
-
-
-
---
---------
-------
-------在上述代码中，我们创建了一个包含三个菜单项的漂浮按钮，并且将其放在了一个 div 病更，该漂浮按钮主要用于缩放和全屏操作。同时，我们指定了菜单从上方弹出并带有一个渐隐效果（fade）。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551da81e8991b448cf45e