File
Implements
Metadata
| selector |
stbui-customizer |
| styleUrls |
./customizer.component.scss |
| templateUrl |
./customizer.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
_colors
|
Type : any
|
Default value : ['primary', 'accent', 'red', 'blue', 'orange', 'material']
|
|
|
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() {}
}
<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>
.customizer {
&-container {
width: 250px;
padding: 10px;
}
&-radio-group {
display: inline-flex;
flex-direction: column;
}
&-radio-button {
margin: 5px;
}
}
Legend
Html element with directive