File
|
isCourseProgress
|
Type : any
|
|
|
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-pb-horizontal',
templateUrl: './pb-horizontal.component.html',
styleUrls: ['./pb-horizontal.component.scss'],
})
export class PbHorizontalComponent {
// tslint:disable-next-line:no-input-rename
@Input('progress') progress;
// tslint:disable-next-line:no-input-rename
@Input('isOnBoardCard') isOnBoardCard;
@Input('isCourseProgress') isCourseProgress;
constructor() {
console.log('pb-horizontal.component');
}
}
<div [ngClass]="(isCourseProgress)? 'progress-outer-course':'progress-outer'">
<div [style.width]="progress + '%'" [ngClass]="(isCourseProgress)? 'progress-inner-course' : (isOnBoardCard) ? 'progress-inner-onboard progress-inner' : ((progress < 100) ? 'progress-inner-primary progress-inner' : 'progress-inner progress-inner-secondary')">
</div>
</div>
@import "src/assets/styles/variables";
@import "src/assets/styles/_custom-mixins.scss";
:host {
.progress-outer {
width: 100%;
text-align: center;
background-color: map-get($colors, light_gray);
color: map-get($colors, white); // border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 2px; // border-radius: 20px;
background-color: map-get($colors, primary);
}
.progress-outer-course{
width: 100%;
text-align: center;
background-color: map-get($colors, light_silver);
color: map-get($colors, white);
}
.progress-inner-onboard {
min-width: 0;
white-space: nowrap;
overflow: hidden;
padding: 2px;
border-radius: 0;
background-color: map-get($colors, primary);
}
.progress-inner-course{
min-width: 0;
white-space: nowrap;
overflow: hidden;
padding: 2px;
border-radius: 0;
background-color: map-get($colors, office_green );
}
.progress-inner-primary {
background-color: map-get($colors, primary);
}
.progress-inner-secondary {
background-color: map-get($colors, secondary);
}
}
Legend
Html element with directive