1.2.9 • Published 6 years ago
@smallstack/mat-progress-buttons v1.2.9
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
License
MIT © Michael Doye
1.2.9
6 years ago