Skip to content

hughjdavey/ngx-fab

Repository files navigation

ngx-fab

Simple floating action buttons for Angular >= 2

Demo can be found here

Installation

  • npm install --save ngx-fab
  • Edit your app.module file:
...
import { NgxFabModule } from 'ngx-fab';

@NgModule({
  ...
  imports: [
    ...
    NgxFabModule
  ],
  ...
})

Usage

Type Definitions:
  • type FabSize = 'small' | 'medium' | 'large'
  • type FabPosition = 'top-left' | 'top-middle' | 'top-right' | 'middle-left' | 'middle-middle' | 'middle-right' | 'bottom-left' | 'bottom-middle' | 'bottom-right'
@Input() options:
  • backgroundColor [string] - HTML color name or hexcode for background color (defaults to 'crimson')
  • fabSize [FabSize] - fab size, 40, 60 or 100px respectively (defaults to 'medium')
  • iconClass [string] - font awesome icon classes from 'fa', 'fab', 'far' or 'fas' collections (defaults to 'fa fa-plus')
  • iconColor [string] - HTML color name or hexcode for icon color (defaults to 'black' or 'white' depending on backgroundColor)
  • position [FabPosition] - position of fab within container (defaults to 'bottom-right')
  • additionalX [float] - additional positive or negative offset on the x-axis used for custom positioning (defaults to 0)
  • additionalY [float] - additional positive or negative offset on the y-axis used for custom positioning (defaults to 0)

Examples

deafault FAB - bottom right, crimson background, plus icon
  • <ngx-fab></ngx-fab>
custom background color, icon and position
  • <ngx-fab [backgroundColor]="'#88B04B'" [iconClass]="'fas fa-atom'" [position]="'top-middle'"></ngx-fab>
custom icon and icon color
  • <ngx-fab [backgroundColor]="'yellow'" [iconClass]="'fas fa-plus'" [iconColor]="'#ff00ff'"></ngx-fab>
custom sizes
  • <ngx-fab [backgroundColor]="'crimson'" [iconClass]="'fas fa-star'" [fabSize]="'small'"></ngx-fab>
  • <ngx-fab [backgroundColor]="'crimson'" [iconClass]="'fas fa-star'" [fabSize]="'large'"></ngx-fab>
custom positioning via additionalX to form a row of 3
  • <ngx-fab [iconClass]="'fas fa-star'" [position]="'middle-middle'" [fabSize]="'small'" [additionalX]="-50"></ngx-fab>
  • <ngx-fab [iconClass]="'fas fa-star'" [position]="'middle-middle'" [fabSize]="'small'"></ngx-fab>
  • <ngx-fab [iconClass]="'fas fa-star'" [position]="'middle-middle'" [fabSize]="'small'" [additionalX]="50"></ngx-fab>