A highly customizable float action button build for Angular2+ with Angular material
npm install @corentinmag/ngx-float-buttonTo use this library:
``bash`
$ npm install @corentinmag/ngx-float-button
$ ng add @angular/material
> check demo here
`typescript
// app.module.ts
import { NgxFloatButtonModule } from '@corentinmag/ngx-float-button';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
...,
imports: [
BrowserModule,
BrowserAnimationsModule,
NgxFloatButtonModule
]
})
`
`html`
List of Inputs
| @Inputs | type | default | description |
|----------------------|--------------------------------------|----------|--------------|
| direction | 'top' \| 'left' \| 'right' \| 'bottom'| top | position of the child buttons relative to the main button |string
| icon | | home | should be a material icon string (https://fonts.google.com/icons) |string
| tooltip | | home | not used |ThemePalette
| color | | primary| main button color |'br' \| 'bl' \| 'tl' \| 'tr'
| position | | br | either the main button is positionned on the bottom-right, bottom-left, top-left or top-right of the viewport |boolean
| disabled | | false | either the main button is disabled or not |number
| spaceBetween | | 5 | the space in pixel between each child button |number
| spaceGap | | 15 | the space in pixel between the main button and the first child button |boolean
| isOpen | | false | either the child buttons should appear at startup |boolean
| hoverable | | false | either the user should hover or click the main button to reveal the child buttons |boolean
| tooltipDisabled | | false | either tooltip is enabled or not |
List of Inputs
| @Inputs | type | default | description |
|----------------------|--------------------------------------|----------|--------------|
| icon | string | home | should be a material icon string (https://fonts.google.com/icons) |string
| tooltip | | home | the tooltip text |ThemePalette
| color | | primary| main button color |boolean
| disabled | | false | either the button is disabled or not |boolean
| tooltipDisabled | | false` | either tooltip is enabled or not |