projects/rebirth-ng/src/lib/progress-bar/progress-bar.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | re-progress-bar |
| styleUrls | progress-bar.component.scss |
| templateUrl | ./progress-bar.component.html |
Inputs |
constructor(rebirthNGConfig: RebirthNGConfig)
|
||||||
|
Parameters :
|
animate
|
Type: |
cssClass
|
Type: |
max
|
Type: |
striped
|
Type: |
text
|
Type: |
thin
|
Type: |
type
|
Type:
Default value: |
value
|
Type: |
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { RebirthNGConfig } from '../rebirth-ng.config';
@Component({
selector: 're-progress-bar',
templateUrl: './progress-bar.component.html',
styleUrls: ['./progress-bar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProgressBarComponent {
@Input() type: '' | 'success' | 'info' | 'warning' | 'danger' = '';
@Input() text: string;
@Input() thin: boolean;
@Input() max: number;
@Input() animate: boolean;
@Input() striped: boolean;
@Input() value: number;
@Input() cssClass: string;
constructor(rebirthNGConfig: RebirthNGConfig) {
this.type = <any>rebirthNGConfig.progressBar.type;
this.animate = rebirthNGConfig.progressBar.animate;
this.striped = rebirthNGConfig.progressBar.striped;
this.max = rebirthNGConfig.progressBar.max;
}
}
<div class="progress {{cssClass}}" [ngClass]="{'thin': thin}">
<div class="progress-bar {{ type? 'progress-bar-' + type : ''}}"
[ngClass]="{active: animate, 'progress-bar-striped' : striped}"
role="progressbar"
[attr.aria-valuenow]="value" aria-valuemin="0"
[attr.aria-valuemax]="max" style="min-width: 2em;" [style.min-width.%]="value * 100 / max">{{text}}
</div>
</div>