File
Metadata
| selector |
stbui-widget-state,stb-widget-state |
| styleUrls |
./state.component.scss |
| templateUrl |
./state.component.html |
import { Component, Input } from '@angular/core';
@Component({
selector: 'stbui-widget-state,stb-widget-state',
templateUrl: './state.component.html',
styleUrls: ['./state.component.scss']
})
export class StateComponent {
@Input() icon: string;
@Input() backgroundcolor: string;
@Input() changeicon: string;
@Input() changepercent: string;
@Input() property: string;
@Input() textcolor: string;
@Input() value: string;
@Input() valueprefix: string;
@Input() valuesubfix: string;
constructor() {}
}
<div class="state-widget mat-elevation-z2" [ngStyle]="{background: backgroundcolor, color: textcolor}">
<div fxLayout="row" fxLayoutAlign="space-between">
<div fxLayout="column" fxLayoutAlign="end">
<div class="value">{{valueprefix}}{{value}}{{valuesubfix}}</div>
<div class="property">{{property}}</div>
</div>
<div fxLayout="column" fxLayoutAlign="space-between">
<mat-icon class="icon icon-size-38" *ngIf="icon">{{icon}}</mat-icon>
<div class="change" fxlayout="row" fxLayoutAlign="end center" *ngIf="changepercent">
<div class="percent">{{changepercent}}%</div>
<mat-icon class="change-icon icon-size-18">{{changeicon}}</mat-icon>
</div>
</div>
</div>
</div>
.state-widget {
padding: 24px;
.value {
font-size: 36px;
margin-top: 12px;
margin-bottom: 12px;
line-height: 1;
}
.property {
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
}
.icon {
margin-top: -8px;
}
.percent {
font-size: 14px;
}
.change-icon {
font-weight: 700;
margin-left: 2px;
}
}
@mixin icon-size($size: 24) {
.icon-size-#{$size} {
font-size: #{$size}px;
height: #{$size}px;
width: #{$size}px;
line-height: #{$size}px;
}
}
@include icon-size(18);
@include icon-size(38);
Legend
Html element with directive