npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-float-button

v1.0.0

Published

Google Material Float Button - Implementation for Angular v7+

Downloads

327

Readme

ngx-float-button

version MIT License

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 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

@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.

CSS animations credits

The css animations were inspired by this