README

Angular Material Design Progress Buttons

Very simple Angular4+ Material Design progress buttons

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" (click)="someFunc()"></progress-bar-button>

API:

@Input() options; // button options (see below)

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

Progress Spinner Button:

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

API:

@Input() options; // button options (see below)

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

Development

Power Shell:

# Clean up previous distributions if folders exist
if (Test-Path dist) {
    Remove-Item dist -Recurse -Force
}

if (Test-Path build) {
    Remove-Item build -Recurse -Force
}

# Variables
$NGC="node_modules/.bin/ngc.cmd"
$ROLLUP="node_modules/.bin/rollup.cmd"

# Run Angular Compiler
& "$NGC" -p src/tsconfig-build.json

# Rollup mat-progress-buttons.js
& "$ROLLUP" build/mat-progress-buttons.js -o dist/mat-progress-buttons.js

# Run Angular Compiler to ES5
& "$NGC" -p src/tsconfig-es5.json

# Rollup mat-progress-buttons.js
& "$ROLLUP" build/mat-progress-buttons.js -o dist/mat-progress-buttons.es5.js

# Copy non-js files from build
Copy-Item -Exclude *.js -Recurse -Path build/* -Destination dist

# Copy library package.json
Copy-Item -Path src/package.json -Destination build/package.json
Copy-Item -Path README.md -Destination build/README.md

@smallstack/mat-progress-buttons

Usage no npm install needed!