angular-material-app documentation
  1. Components
  2. StateComponent

File

src/app/component/widget/state/state.component.ts

Metadata

selector stbui-widget-state,stb-widget-state
styleUrls ./state.component.scss
templateUrl ./state.component.html

Index

Inputs

Constructor

constructor()
Defined in src/app/component/widget/state/state.component.ts:17

Inputs

backgroundcolor
Type : string
Defined in src/app/component/widget/state/state.component.ts:10
changeicon
Type : string
Defined in src/app/component/widget/state/state.component.ts:11
changepercent
Type : string
Defined in src/app/component/widget/state/state.component.ts:12
icon
Type : string
Defined in src/app/component/widget/state/state.component.ts:9
property
Type : string
Defined in src/app/component/widget/state/state.component.ts:13
textcolor
Type : string
Defined in src/app/component/widget/state/state.component.ts:14
value
Type : string
Defined in src/app/component/widget/state/state.component.ts:15
valueprefix
Type : string
Defined in src/app/component/widget/state/state.component.ts:16
valuesubfix
Type : string
Defined in src/app/component/widget/state/state.component.ts:17
 
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() {}
}
Copy
<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>
Copy

./state.component.scss 

.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);
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""