Google Material Floating Action Button
,
Implementation for Angular v4+
First you need to install the npm module:
npm install ngc-float-button --save
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Check the Google Material Icons site
to see all icons
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgcFloatButtonModule} from 'ngc-float-button';
@NgModule({
imports: [
BrowserModule,
NgcFloatButtonModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
If you use a SharedModule
that you import in multiple other feature modules,
you can export the NgcFloatButtonModule
to make sure you don't have to import it in every module.
@NgModule({
exports: [
CommonModule,
NgcFloatButtonModule
]
})
export class SharedModule { }
Finally, you can use ngc-float-button
in your Angular project.
The FAB template
<ngc-float-button icon="add">
<ngc-float-item-button icon="person_add" content="float item 1"></ngc-float-item-button>
<ngc-float-item-button icon="gps_fixed" content="float item 2"></ngc-float-item-button>
<ngc-float-item-button icon="mode_edit" content="float item 3"></ngc-float-item-button>
</ngc-float-button>
The ngc-float-button
component has two @Input
properties:
[open]="open"
and [direction]="direction"
[open]
property waiting for BehaviorSubject
type, with this you can open or close the FAB dispatching events.
Sample:
...
//our parent component
// with this our FAB will be started open.
private open:BehaviorSubject<boolean> = new BehaviorSubject(true);
...
<div>
<button md-button (click)="open.next(true)">Open</button>
<button md-button (click)="open.next(false)">Close</button>
</div>
<ngc-float-button icon="add" [open]="open">
...
[direction]
property waiting for string
type value that's accepted top
, right
, bottom
, left
, remember the [property-binding]
is optional but if you need change this property dynamically it's required.
Sample:
<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>
<ngc-float-button icon="add" [direction]="direction">
...
You can listener events in ngc-float-button
subscribing the (events)
output.
Sample:
...
output(log) {
console.log(log);
}
...
<ngc-float-button (events)="output($event)">
...
If you need change some css property in ngc-float-button
you need to use /deep/
selector in parent css component.
More info about customization soon.