Gaulomatic/mat-progress-buttons

Very simple Angular4+ Material Design progress buttons

Angular Material Design Progress Buttons

Very simple Angular6+ Material Design progress buttons

Demo

StackBlitz Demo

Usage

Import in any Angular application by running:

$ npm install --save mat-progress-buttons

Install Angular Material: (Getting Started)

$ npm install --save @angular/material @angular/cdk

Install Angular Animations:

npm install --save @angular/animations

Import a material theme into your style.css file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Then import MatProgressButtons into your AppModule:

import { MatProgressButtons } from 'mat-progress-buttons';

@NgModule({
  imports: [ MatProgressButtons ]
})

export class AppModule { }

That's it! Once imported, you can use the components:

Progress Bar Button:

<progress-bar-button [options]="options" (onClick)="someFunc()"></progress-bar-button>

API:

You can use (click) but a custom onClick handler is provided as well. Which is useful if using the buttons for forms and you need the buttton to be entirely disabled.

@Output() onClick

Button options (see below)

@Input() options

Options:

active: boolean, // is loading
text: string, // button text
buttonColor?: string, // primary/accent/warn
barColor?: string, // primary/accent/warn
raised?: boolean, // raised button
mode?: string, // determinate/intederminate
value?: number // used if mode is determinate
disabled?: boolean // button disabled

Progress Spinner Button:

<spinner-button [options]="options" (onClick)="someFunc()"></spinner-button>

API:

You can use (click) but a custom onClick handler is provided as well. Which is useful if using the buttons for forms and you need the buttton to be entirely disabled.

@Output() onClick

Button options (see below)

@Input() options

Options:

active: boolean, // is loading
text: string, // button text
buttonColor?: string, // primary/accent/warn
spinnerColor?: string, // primary/accent/warn
raised?: boolean, // raised button
mode?: string, // determinate/intederminate
value?: number // used if mode is determinate
fullWidth?: boolean // button will be full width if true
disabled?: boolean // button disabled

Development

Download or clone this repo

run npm install

When you are ready to build, run npm run bundle

License

MIT © Michael Doye