
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
ngx-float-button
Advanced tools
Google Material Floating Action Button
,
Implementation for Angular v7+.
This project was based on ngc-float-button
Access a demo here or download this project and execute: yarn && yarn start
or npm install && npm run start
to self server it.
First, you need to install the npm module:
npm install ngx-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
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 {}
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.
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>
ngx-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 ngx-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>
<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 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 ngx-float-item-button
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)">
...
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.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.