https://github.com/gustavocostaw/ngc-float-button
Google Material Design Float Button - Implementation for Angular v4+. Demo: http://bit.ly/2yIya2f
https://github.com/gustavocostaw/ngc-float-button
angular angular-components material-design
Last synced: 3 months ago
JSON representation
Google Material Design Float Button - Implementation for Angular v4+. Demo: http://bit.ly/2yIya2f
- Host: GitHub
- URL: https://github.com/gustavocostaw/ngc-float-button
- Owner: GustavoCostaW
- License: mit
- Created: 2017-08-01T22:32:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-30T02:57:48.000Z (over 5 years ago)
- Last Synced: 2025-08-16T05:27:02.494Z (4 months ago)
- Topics: angular, angular-components, material-design
- Language: TypeScript
- Homepage:
- Size: 36.1 KB
- Stars: 57
- Watchers: 9
- Forks: 23
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngc-float-button
[`Google Material Floating Action Button`](https://material.io/guidelines/components/buttons-floating-action-button.html),
Implementation for Angular v4+
## [`Demo`](http://bit.ly/2yIya2f)
## Installation
First, you need to install the npm module:
```sh
npm install ngc-float-button --save
```
## Dependencies
#### Google Material Icons
#### Angular Material >= beta.12
#### Angular >= 4.4.4
## Usage
#### 1. You need to add the Google Material icons in your `index.html`:
##### The Google Material Icons is required by Angular Material component
```HTML
```
Check the [`Google Material Icons site`](https://material.io/icons/) to see all icons
#### 2. Import the `NgcFloatButtonModule` in your project:
```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
```
## API
#### @Input properties
`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]`
```Typescript
...
//our parent component
// with 'true' our FAB will be started open.
public open:BehaviorSubject = new BehaviorSubject(true); // true is the initial state of FAB
...
```
```HTML
Open
Close
...
```
Sample: `[direction]`
```HTML
Top
Right
Bottom
Left
...
```
`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`
#### @Output property
You can listen the all events emitted by `ngc-float-button` subscribing in the `(events)` observable output.
Sample:
```Typescript
...
output(log) {
console.log(log);
}
...
```
```HTML
...
```
## Customization
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.
## CSS animations credits
[`The css animations were inspired by this`](https://embed.plnkr.co/gist/00de5ab564446dcb8be067d44e67a692)