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

File

src/app/component/widget/switch/switch.component.ts

Metadata

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

Index

Inputs

Constructor

constructor()
Defined in src/app/component/widget/switch/switch.component.ts:12

Inputs

backgroundcolor
Type : string
Defined in src/app/component/widget/switch/switch.component.ts:10
icon
Type : string
Defined in src/app/component/widget/switch/switch.component.ts:9
property
Type : string
Defined in src/app/component/widget/switch/switch.component.ts:11
value
Type : string
Defined in src/app/component/widget/switch/switch.component.ts:12
 
import { Component, Input } from '@angular/core';

@Component({
  selector: 'stbui-widget-switch,stb-widget-switch',
  templateUrl: './switch.component.html',
  styleUrls: ['./switch.component.scss']
})
export class SwitchComponent {
  @Input() icon: string;
  @Input() backgroundcolor: string;
  @Input() property: string;
  @Input() value: string;

  constructor() {}
}
Copy
<div class="widget-switch mat-elevation-z2">
  <div fxLayout="row" fxLayoutAlign="start center">
    <div fxFlex.gt-xs="25" class="icon-container" [ngStyle]="{background: backgroundcolor}">
      <mat-icon class="icon-size-60">{{icon}}</mat-icon>
    </div>
    <div>
      <div class="widget-switch-title">{{value}}</div>
      <div class="widget-switch-property">{{property}}</div>
    </div>
  </div>
</div>
Copy

./switch.component.scss 

.widget-switch {
}

.icon-container {
  margin: 10px;
  text-align: center;

  mat-icon {
    color: #fff;
  }
}

.widget-switch-title {
  font-size: 20px;
  font-weight: 900;
}

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

result-matching ""

    No results matching ""