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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent