Google Material Floating Action Button
,
Implementation for Angular v4+
Demo
First, you need to install the npm module:
npm install ngc-float-button --save
index.html
: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Check the Google Material Icons site
to see all icons
NgcFloatButtonModule
in your project: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>
ngc-float-button
properties:
icon
property expects for icon_name
listed in Google Material Icons site.
[open]
property expects for BehaviorSubject
type, with this you can open or close the FAB dispatching events.
disabled
property expects a boolean
to toggle if a button is clickable. Defaults to false
.
color
property define the background color and expects a background:{value}
valid value. Defaults to #dd0031
.
direction
property expects for string
value type value that's accepted top
, right
, bottom
, left
. Defaults to top
spaceBetweenButtons
- property expects a valid number value in px
to define the space between each ngc-float-item-button
, Defaults to 55
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>
<ngc-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>
<ngc-float-button icon="add" direction="{{direction}}">
...
ngc-float-item-button
properties:
icon
property expects for icon_name
listed in Google Material Icons site.color
property define the background color and expects a background:{value}
valid value. Defaults to white
.disabled
property expects a boolean
to toggle if a button is clickable. Defaults to false
.content
property expects string
value to show additional text in ngc-float-item-button
You can listen the all events emitted by ngc-float-button
subscribing in the (events)
observable 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.