ngx-float-button
v1.0.0
Published
Google Material Float Button - Implementation for Angular v7+
Downloads
486
Maintainers
Readme
ngx-float-button
Google Material Floating Action Button
,
Implementation for Angular v7+.
This project was based on ngc-float-button
Demo
Access a demo here or download this project and execute: yarn && yarn start
or npm install && npm run start
to self server it.
Installation
First, you need to install the npm module:
npm install ngx-float-button --save
Dependencies
Google Material Icons
Angular Material >= 7
Angular >= 7
Usage
1. You need to add the Google Material icons in your index.html
:
The Google Material Icons is required by Angular Material component
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Check the Google Material Icons site
to see all icons
2. Import the ngxFloatButtonModule
in your project:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxFloatButtonModule } from 'ngx-float-button';
@NgModule({
imports: [BrowserModule, NgxFloatButtonModule],
bootstrap: [AppComponent]
})
export class AppModule {}
SharedModule
If you use a SharedModule
that you import in multiple other feature modules,
you can export the NgxFloatButtonModule
to make sure you don't have to import it in every module.
@NgModule({
exports: [CommonModule, NgxFloatButtonModule]
})
export class SharedModule {}
Finally, you can use ngx-float-button
in your Angular project.
Sample
The FAB template
<ngx-float-button icon="add">
<ngx-float-item-button icon="person_add" content="float item 1"></ngx-float-item-button>
<ngx-float-item-button icon="gps_fixed" content="float item 2"></ngx-float-item-button>
<ngx-float-item-button icon="mode_edit" content="float item 3"></ngx-float-item-button>
</ngx-float-button>
API
@Input properties
ngx-float-button
properties:
icon
property expects foricon_name
listed in Google Material Icons site.[open]
property expects forBehaviorSubject
type, with this you can open or close the FAB dispatching events.disabled
property expects aboolean
to toggle if a button is clickable. Defaults tofalse
.color
property define the background color and expects abackground:{value}
valid value. Defaults to#dd0031
.direction
property expects forstring
value type value that's acceptedtop
,right
,bottom
,left
. Defaults totop
spaceBetweenButtons
- property expects a valid number value inpx
to define the space between eachngx-float-item-button
, Defaults to55
Sample: [open]
...
//our parent component
// with 'true' our FAB will be started open.
public open:BehaviorSubject<boolean> = new BehaviorSubject(true); // true is the initial state of FAB
...
<div>
<button md-button (click)="open.next(true)">Open</button>
<button md-button (click)="open.next(false)">Close</button>
</div>
<ngx-float-button icon="add" [open]="open">
...
Sample: [direction]
<div>
<button md-button (click)="direction='top'">Top</button>
<button md-button (click)="direction='right'">Right</button>
<button md-button (click)="direction='bottom'">Bottom</button>
<button md-button (click)="direction='left'">Left</button>
</div>
<ngx-float-button icon="add" direction="{{direction}}">
...
ngx-float-item-button
properties:
icon
property expects foricon_name
listed in Google Material Icons site.color
property define the background color and expects abackground:{value}
valid value. Defaults towhite
.disabled
property expects aboolean
to toggle if a button is clickable. Defaults tofalse
.content
property expectsstring
value to show additional text inngx-float-item-button
@Output property
You can listen the all events emitted by ngx-float-button
subscribing in the (events)
observable output.
Sample:
...
output(log) {
console.log(log);
}
...
<ngx-float-button (events)="output($event)">
...
Customization
If you need change some css property in ngx-float-button
you need to use /deep/
selector in parent css component.
More info about customization soon.