1. 简介
j-ng2-floating-button 是一款由 Angular 团队开发的浮动按钮组件，它可以方便地在页面上添加浮动按钮，并提供了多种配置选项，如按钮样式、位置、动画等。本文将详细介绍该组件的使用方法，以及如何在你的项目中快速应用。
2. 安装
在使用 j-ng2-floating-button 前，我们需要先安装它。安装非常简单，只需要在命令行窗口输入以下命令：
npm install j-ng2-floating-button --save
3. 使用
安装完成后，我们就可以使用 j-ng2-floating-button 了。首先，在你的模块中引入该模块：
import { JNg2FloatingButtonModule } from 'j-ng2-floating-button';然后，在模块的 imports 数组中添加该模块：
@NgModule({
imports: [
JNg2FloatingButtonModule,
// other modules...
],
// other properties...
})
export class AppModule { }接下来，在你的组件模板中添加带有 j-floating-button 指令的元素：
<div j-floating-button> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div>
这样就可以在页面上添加一个默认样式的浮动按钮了。你可以尝试点击该按钮，看看效果如何。
4. 配置
j-ng2-floating-button 提供了多种配置选项，你可以根据自己的需求进行修改。下面我们将逐一介绍这些选项。
4.1 按钮位置
默认情况下，j-ng2-floating-button 会将按钮放在页面的右下角。如果你想要改变按钮的位置，可以在 j-floating-button 指令后添加一个带有 position 属性的对象：
<div j-floating-button [position]="{x: 'left', y: 'top'}">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>这样就可以将按钮放在页面的左上角。
4.2 按钮样式
j-ng2-floating-button 还提供了多种按钮样式，你可以根据自己的需求进行修改。修改样式也很简单，只需要在 j-floating-button 指令后添加一个带有 buttonStyle 属性的对象：
<div j-floating-button [buttonStyle]="{backgroundColor: '#4CAF50'}">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>这样就可以将按钮的背景色改为绿色。
4.3 按钮动画
j-ng2-floating-button 还提供了多种按钮动画，你可以根据自己的需求进行修改。修改动画也很简单，只需要在 j-floating-button 指令后添加一个带有 animate 属性的对象：
<div j-floating-button [animate]="true"> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div>
这样就可以让按钮在展开和收起时添加动画效果。
5. 示例代码
完整的 j-ng2-floating-button 示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ----------------- --------------- ------- -- ------- -------------------------------- ----------- -----------------
--------------------
--------------------
--------------------
------
-
--
------ ----- ------------ - -6. 结语
j-ng2-floating-button 是一款十分实用的浮动按钮组件，它可以方便地在页面上添加浮动按钮，并提供了多种配置选项。本文详细介绍了该组件的使用方法和配置选项，希望可以帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005550c81e8991b448d23fd