简介
ng2-fab-speed-dial 是一个轻量级的 Angular2+ 组件库，旨在帮助前端开发者快速实现页面风格为 FloatingActionButton Speed Dial的功能。
安装
使用npm进行安装：
npm install --save ngx-fab-speed-dial
简单使用
在需要使用 ng2-fab-speed-dial 的组件中引入组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------
------------
--------- -----------
--------- -
--------------- ---- -------------------------------
------------------------------
-------------
------- ----------------------------- -----------------------------------------------
------- ------------------------- ------------------------------------------------------
--------------
-----------------
-
--
------ ----- ------------ -
---------------- ---------------------- -
------------------------
-
---------------- -
-- -----
-
------------ -
-- -----
-
-参数说明
alwaysOpened，默认值false，如果设置为false，fab 将在被点击时切换打开/关闭状态。direction，默认值'up'，fab 展开时的方向。可选值为'up'，'down'，'left'，'right'。animation，默认值'scale'，fab 展开时的动画。可选值为'scale'，'fade'。position，默认值'top-right'，fab 相对于父元素的位置。可选值为'top-right'，'top-left'，'bottom-right'，'bottom-left'。rotateAngle，默认值0，fab 展开时的旋转角度。可选值为-180到180之间的整数。$event.stopPropagation，默认值true，在toggle事件处理程序中调用event.stopPropagation()。
示例代码
我们可以使用 ng2-fab-speed-dial 来实现一个简单的“添加”按钮，并自定义点击后弹出的菜单按钮。
下面是一个完整的示例代码，将上述所有参数均设置为默认值，并将 $event.stopPropagation 设为 true。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- ---------------------
------------
--------- -----------
--------- -
--------------- ---- -------------------------------
------------------------------
-------------
------- ----------------------------- -----------------------------------------------
------- ------------------------- ------------------------------------------------------
--------------
-----------------
--
------- --
--------------- -
---------- -----
-
--
--
------ ----- ------------ -
---------------- ---------------------- -
------------------------
-
---------------- -
---------------- --- -----------
-
------------ -
---------------- --- -------
-
-总结
通过本篇文章，我们了解了 ng2-fab-speed-dial 的基本使用方法和参数说明，并且实现了一个具有指导意义的示例代码。希望这篇文章能够帮助您在实际开发中更好地使用 ng2-fab-speed-dial！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663c81e8991b448e23c3