Anguar Material Design Progress Buttons
Demo
View all the directives in action at https://mat-progress-buttons.firebaseapp.com
StackBlitz demo https://stackblitz.com/edit/mat-progress-buttons-demo
Dependencies
- Angular (requires Angular 2 or higher, tested with 2.0.0)
- Angular Material
Installation
Install above dependencies via npm.
Now install mat-progress-buttons via:
npm install --save mat-progress-buttons
SystemJS
Note:If you are using
SystemJS, you should adjust your configuration to point to the UMD bundle.In your systemjs config file,mapneeds to tell the System loader where to look format-progress-buttons:
map: {
'mat-progress-buttons': 'node_modules/mat-progress-buttons/bundles/mat-progress-buttons.umd.js',
}
Once installed you need to import the main module:
import { MatProgressButtonsModule } from 'mat-progress-buttons';
The only remaining part is to list the imported module in your application module. The exact method will be slightlydifferent for the root (top-level) module for which you should end up with the code similar to (notice MatProgressButtonsModule .forRoot()):
import { MatProgressButtonsModule } from 'mat-progress-buttons';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatProgressButtonsModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import MatProgressButtonsModule:
import { MatProgressButtonsModule } from 'mat-progress-buttons';
@NgModule({
declarations: [OtherComponent, ...],
imports: [MatProgressButtonsModule, ...],
})
export class OtherModule {
}
Usage
Spinner Button
import { Component } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons';
@Component({
selector: 'app-home',
template: '<mat-spinner-button (btnClick)="btnClick()" [options]="btnOpts"></mat-spinner-button>'
})
export class SomeComponent {
// Button Options
btnOpts: MatProgressButtonOptions = {
active: false,
text: 'Stroked Button',
spinnerSize: 19,
raised: false,
stroked: true,
flat: false,
fab: false,
buttonColor: 'accent',
spinnerColor: 'accent',
fullWidth: false,
disabled: false,
mode: 'indeterminate',
customClass: 'some-class',
// add an icon to the button
buttonIcon: {
fontSet: 'fa',
fontIcon: 'fa-heart',
inline: true
}
};
// Click handler
btnClick(): void {
this.btnOpts.active = true;
setTimeout(() => {
this.btnOpts.active = false;
}, 3350);
}
};
Spinner button FAB
You can use the spinner button with a mat-fab with an icon. Both mat-icon and font awesome are supported.
To set up fontawesome to work with mat-icon you can see instructions here
Use the icon property on the options object
Note: Bar Button does not support the fab style, currently.
btnOpts: MatProgressButtonOptions = {
active: false,
text: 'Stroked Button',
spinnerSize: 19,
raised: false,
stroked: true,
flat: false,
fab: true, // set fab to true
buttonColor: 'accent',
spinnerColor: 'accent',
fullWidth: false,
disabled: false,
mode: 'indeterminate',
icon: {
color: primary,
fontSet: 'fa',
fontIcon: 'fa-save',
inline: true
},
};
Icon API
interface MatProgressButtonIcon {
color?: ThemePalette; // icon color (primary or accent)
fontIcon?: string; // name of the icon (for fontawsome, use 'fa-[icon_name])'
fontSet?: string; // if using fontawesome, use 'fa' (omit for material icons)
inline?: boolean; // automatically size the icon
svgIcon?: string; // name of the icon in the SVG icon set.
}
More info in Angular Material Docs
Bar Button
import { Component } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons';
@Component({
selector: 'app-home',
template: '<mat-bar-button (btnClick)="btnClick()" [options]="btnOpts"></mat-bar-button>'
})
export class SomeComponent {
// Button Options
btnOpts: MatProgressButtonOptions = {
active: false,
text: 'Stroked Button',
buttonColor: 'accent',
barColor: 'accent',
raised: false,
stroked: true,
flat: false,
mode: 'indeterminate',
value: 0,
disabled: false,
customClass: 'some-class',
// add an icon to the button
buttonIcon: {
fontSet: 'fa',
fontIcon: 'fa-heart',
inline: true
}
};
// Click handler
btnClick(): void {
this.btnOpts = { ...this.btnOpts, active: true };
setTimeout(() => {
this.btnOpts = { ...this.btnOpts, active: false };
}, 3350);
}
};
Global Options
Optionally pass default MatProgressButtonOptions in forRoot in side your app.modlue.ts for each button as an array.
const button1: MatProgressButtonOptions = {
id: 'button1', // Id should match the [buttonId] input
...
};
const button2: MatProgressButtonOptions = {
id: 'button2', // Id should match the [buttonId] input
...
};
@NgModule({
imports: [
MatProgressButtonsModule.forRoot([button1, button2]),
],
declarations: [HomeComponent],
})
NB: add the id above should match the id provided in the [buttonId] input.
<mat-bar-button
(btnClick)="someFunc3()"
[buttonId]="'button1'"
[active]="buttonState"
></mat-bar-button>
[options] will override Global Options provided in forRoot
Overriding default CSS
To override CSS (color and background color of spinner buttons), you can write CSS for particular component and use ViewEncapsulation.None
Example:
CSS:
.class-name {
background-color: red;
}
TS:
@Component({
...,
encapsulation: ViewEncapsulation.None
})
class MyComponent {}
Run Demo App Locally
- clone this repo by running
$ git clone https://github.com/michaeldoye/mat-progress-buttons.git
- link the mat-progress-buttons package
$ ng build
$ npm link ./dist/mat-progress-buttons
or
$ ng build
$ npm link ./dist/mat-progress-buttons
$ ng build --watch
- navigate to the demo app directory
$ cd demo
- install the dependencies
$ npm i
- run/start/serve the app
$ npm run start
or
$ ng serve --open
- the app is now hosted by
http://localhost:4200/
Development
- clone this repo
- Install the dependencies by running
npm i - build the library
ng buld - test the library
ng test - Link the library
npm link ./dist/mat-progress-buttons - Navigate to the demo app's directory:
cd demonpm inpm start
License
Copyright (c) 2018 Michael Doye. Licensed under the MIT License (MIT)
-
.progress( value:Number, suppressEvents:Boolean ) : * 获取或者设置单次动画的进程（从0到1） var progress = myTween.progress(); //gets current progress myTween.progress( 0.25 ); //sets progress to one quarter finished .
-
.progress( value:Number, suppressEvents:Boolean ) : * 获取或者设置时间轴的进程，返回该时间轴以便链式调用。 时间轴的进程为开始时是0，到终点时是1。 var progress = myTimeline.progress(); //获取progress myTimeline.progress( 0.25 ); //设置progress.prog
-
进度条。 引入 import { Progress } from 'mint-ui'; Vue.component(Progress.name, Progress); 例子 传入 value 作为进度条的值。可自定义它的线宽 <mt-progress :value="20" :bar-height="5"></mt-progress> 可在进度条两侧显示文字 <mt-progress :va
-
progress 进度条。 属性名 类型 默认值 说明 percent Float 无 百分比 0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Number 6 进度条线的宽度，单位 px color Color #F0250F 进度条颜色 （请使用 activeColor） activeColor Color 已选择的进度条的颜色 b
-
Progress，进度条，用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。 完整的进度条结构如下： <div class="weui-progress"> <div class="weui-progress__bar"> <div class="weui-progress__inner-bar js_progress" style="width: 0%;
-
!mkdir -p data !wget http://ufldl.stanford.edu/housenumbers/train.tar.gz -O data/train.tar.gz !wget http://ufldl.stanford.edu/housenumbers/test.tar.gz -O data/test.tar.gz !wget http://ufldl.stanford.e