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

File

src/app/admin/customizer/customizer.component.ts

Implements

OnInit

Metadata

selector stbui-customizer
styleUrls ./customizer.component.scss
templateUrl ./customizer.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/admin/customizer/customizer.component.ts:11

Inputs

settings
Type : any
Defined in src/app/admin/customizer/customizer.component.ts:9

Methods

ngOnInit
ngOnInit()
Defined in src/app/admin/customizer/customizer.component.ts:15
Returns : void

Properties

_colors
Type : any
Default value : ['primary', 'accent', 'red', 'blue', 'orange', 'material']
Defined in src/app/admin/customizer/customizer.component.ts:11
 
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'stbui-customizer',
  templateUrl: './customizer.component.html',
  styleUrls: ['./customizer.component.scss']
})
export class CustomizerComponent implements OnInit {
  @Input() settings: any;

  _colors: any = ['primary', 'accent', 'red', 'blue', 'orange', 'material'];

  constructor() {}

  ngOnInit() {}
}
Copy
<div class="customizer-container" fxLayout="column">
  <div class="m-t-10">{{'settings.header.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.header">
    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'stbui-background-'+color">{{color}}
    </mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.brand' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.brand">
    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'stbui-background-'+color">{{color}}
    </mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.navigation.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.colorClasses.navigation">
    <mat-radio-button class="customizer-radio-button" *ngFor="let color of _colors" [value]="'stbui-background-'+color">{{color}}
    </mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.layout.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.mode"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="boxed">{{'settings.layout.boxed' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="fullwidth">{{'settings.layout.fullwidth' | translate}}</mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.navigation.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.navigation"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="left">{{'settings.navigation.left' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="right">{{'settings.navigation.right' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="none">{{'settings.navigation.none' | translate}}</mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.header.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.header"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="below">{{'settings.header.below' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="none">{{'settings.header.none' | translate}}</mat-radio-button>
  </mat-radio-group>

  <div class="m-t-10">{{'settings.footer.title' | translate}}</div>
  <mat-radio-group class="customizer-radio-group" [(ngModel)]="settings.layout.footer"
    fxLayout="row">
    <mat-radio-button class="customizer-radio-button" value="below">{{'settings.footer.below' | translate}}</mat-radio-button>
    <mat-radio-button class="customizer-radio-button" value="none">{{'settings.footer.none' | translate}}</mat-radio-button>
  </mat-radio-group>

</div>
Copy

./customizer.component.scss 

.customizer {
  &-container {
    width: 250px;
    padding: 10px;
  }

  &-radio-group {
    display: inline-flex;
    flex-direction: column;
  }

  &-radio-button {
    margin: 5px;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""