ngc-float-button - npm Package Compare versions

Comparing version 0.1.8 to 1.0.0

components/ngc-float-item-button.component.ts

@@ -13,3 +13,3 @@ /* created by @GustavoCostaW https://github.com/gustavocostaw/ngc-float-button  */
 @Component({
-  selector: 'ngc-item-button',
+  selector: 'ngc-float-item-button',
   styleUrls: ['./ngc-float-item-button.component.css'],
@@ -16,0 +16,0 @@ template: `

package.json

 {
   "name": "ngc-float-button",
-  "version": "0.1.8",
+  "version": "1.0.0",
   "description": "Google Material Float Button - Implementation for Angular v4+",
@@ -27,15 +27,15 @@ "scripts": {
   "dependencies": {
-    "@angular/animations": "^4.3.3",
+    "@angular/animations": "^4.0.0",
     "@angular/cdk": "^2.0.0-beta.8",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.3.3",
+    "@angular/compiler-cli": "^4.0.0",
     "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.3.3",
-    "@angular/http": "^4.3.3",
-    "@angular/material": "^2.0.0-beta.5",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.8",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/platform-server": "^4.0.0",
-    "@angular/router": "^4.3.3",
+    "@angular/router": "^4.0.0",
     "rxjs": "^5.4.2",
@@ -42,0 +42,0 @@ "zone.js": "0.8.13"

README.md

 # ngc-float-button
+
+[`Google Material Floating Action Button`](https://material.io/guidelines/components/buttons-floating-action-button.html),
+Implementation for Angular v4+
+
+![](http://g.recordit.co/yfaZdBGGCY.gif)
+
+## Installation
+
+First you need to install the npm module:
+
+```sh
+npm install ngc-float-button --save
+```
+
+## Dependencies
+
+#### Angular Material
+#### Google Material Icons
+#### Angular v4+
+
+## Usage
+
+#### 1. You need add the Google Material icons in your `index.html`:
+
+```HTML
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+
+Check the [`Google Material Icons site`](https://material.io/icons/) to see all icons
+
+#### 2. Import the `NgcFloatButtonModule`:
+
+```ts
+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 { }
+```
+
+##### SharedModule
+
+If you use a [`SharedModule`](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-modules) 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.
+
+```ts
+@NgModule({
+    exports: [
+        CommonModule,
+        NgcFloatButtonModule
+    ]
+})
+export class SharedModule { }
+```
+
+Finally, you can use `ngc-float-button` in your Angular project.
+
+## Sample
+
+The FAB template
+
+```HTML
+    <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>
+```
+
+Well, with only that you can see this result:
+
+![](http://g.recordit.co/a40l3UuTQe.gif)
+
+## API
+
+#### @Input properties
+
+The `ngc-float-button` component has two `@Input` properties:
+
+`[open]="open"` and `[direction]="direction"`
+
+`[open]` property waiting for `BehaviorSubject`, with this you can open or close the FAB dispatching events.
+
+Sample:
+
+```Typescript
+    ...
+
+    // with this our FAB will be started open.
+    private open:BehaviorSubject<boolean> = new BehaviorSubject(true);
+
+    ...
+```
+
+```HTML
+    <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:
+
+```HTML
+    <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">
+    ...
+```
+
+#### @Output properties
+
+You can listener events in `ngc-float-button` subscribing the `(events)` output.
+
+Sample:
+
+```Typescript
+    ...
+
+    private output(log) {
+        console.log(log);
+    }
+
+    ...
+```
+
+```HTML
+    <ngc-float-button (events)="output($event)">
+    ...
+```
+
+#### Customization
+
+If you need change some css property in `ngc-float-button` you need use `/deep/` selector in our parent css component.
+
+More info about customization soon.

sample/src/app.component.ts

@@ -11,3 +11,3 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
-  private open:BehaviorSubject<boolean> = new BehaviorSubject(true);
+  private open:BehaviorSubject<boolean> = new BehaviorSubject(false);
 
@@ -14,0 +14,0 @@ private output(log) {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24624

increased by17.73%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

154

increased by7600%

Dependency changes

• Updated@angular/animations@^4.0.0

• Updated@angular/compiler-cli@^4.0.0

• Updated@angular/forms@^4.0.0

• Updated@angular/http@^4.0.0

• Updated@angular/material@^2.0.0-beta.8

• Updated@angular/router@^4.0.0