许多前端框架都提供了自己的按钮组件，但是这些组件并不一定能满足我们的需求。ng2-float-btn 就是一个扩展了 Angular 按钮组件的 npm 包，它允许我们轻松地创建动画效果更为复杂的浮动按钮。本文将为大家介绍如何使用这个 npm 包，让我们快速提升用户体验！
为什么我们需要 ng2-float-btn
通常情况下，我们使用 Angular 自带的按钮组件是可以满足基本需求的，但是在某些场景下，这个组件可能并不能完美地满足我们的要求。比如说：
- 我们需要一个极具吸引力且交互性好的浮动按钮，这个按钮需要带有鼠标悬浮时的动画效果；
- 我们想要让这个浮动按钮可以移动，能够随鼠标位置变化而变化；
- 我们希望这个浮动按钮可以在不同的页面间进行组件共享。
这时，ng2-float-btn 这个 npm 包就能提供我们所需的功能了。
如何使用 ng2-float-btn
首先，我们需要在 Angular 2 项目中安装这个 npm 包：
npm install ng2-float-btn --save
接下来，我们需要在 app.module.ts 中声明这个模块，并导入我们需要使用的组件。代码如下：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- - ---- ---------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
与此同时，我们也需要在组件模块中引入 FloatButtonService 和 FloatButtonConfigService，这将帮助我们自定义我们所需的浮动按钮。代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- ------------------------------------------
------ - ------------------------ - ---- -------------------------------------------------
------------
--------- -----------
--------- -
---- ----------
-------------------------------
------
--
------- --
----- -
------------------
------ ------
------- ------
----------- -----
------- -----
-
---
---------- -
-------------------
------------------------
-
--
------ ----- ------------ --现在我们可以在浮动按钮上使用自定义的样式和动画了。比如，我们可以使用 moveUp、moveRight、moveDown、moveLeft 这些 CSS 类，为按钮添加动画效果。
-- -------------------- ---- ------- -------------- ---------------- ---------------- ------------------------- ----------------------- --------------- ----------------- --------------------------- ------------------- ----------------------------- ----------------
ng2-float-btn 的组件参数
initialX 和 initialY
这两个属性用来设置浮动按钮的初始位置。当然，我们也可以不设置它们，这时按钮会默认出现在左侧的容器中。
buttonConfig
这个属性用来设置浮动按钮所需的配置，比如说设置按钮图标、大小、文字等。
items
这个属性用来设置浮动按钮下的子元素，比如子按钮、文字、图片等等。
expand
这个属性用来设置子元素的扩展状态，是否需要扩大或缩小。
buttonAnim
这个属性用来设置按钮的出现动画效果。
itemAnim
这个属性用来设置子元素出现的动画效果。
position
这个属性用来设置按钮的位置，可以是任何有效的文字位置，比如“bottom-right”、“center-center”等等。
ng2-float-btn 的指导意义
ng2-float-btn 是一个非常实用的 npm 包，它可以帮助前端开发人员为自己的网站添加极具交互性和吸引力的浮动按钮，提高用户体验，同时也可以提高网站的品质和可靠性。对于想要实现特定设计的开发人员来说，ng2-float-btn 更是必不可少的工具。
示例代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005536981e8991b448d09ec