mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 01:47:08 +00:00
Update Angular, Angular Material and Flex Layout to 6
Updated additional project files Updated Angular Material examples
This commit is contained in:
12
src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css
Normal file → Executable file
12
src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css
Normal file → Executable file
@@ -1,14 +1,14 @@
|
||||
.example-h2 {
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.example-section {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.example-margin {
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
70
src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html
Normal file → Executable file
70
src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html
Normal file → Executable file
@@ -1,44 +1,44 @@
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Slider configuration</h2>
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Slider configuration</h2>
|
||||
|
||||
<section class="example-section">
|
||||
<label class="example-margin">Color:</label>
|
||||
<mat-radio-group [(ngModel)]="color">
|
||||
<mat-radio-button class="example-margin" value="primary">
|
||||
Primary
|
||||
</mat-radio-button>
|
||||
<mat-radio-button class="example-margin" value="accent">
|
||||
Accent
|
||||
</mat-radio-button>
|
||||
<mat-radio-button class="example-margin" value="warn">
|
||||
Warn
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</section>
|
||||
<section class="example-section">
|
||||
<label class="example-margin">Color:</label>
|
||||
<mat-radio-group [(ngModel)]="color">
|
||||
<mat-radio-button class="example-margin" value="primary">
|
||||
Primary
|
||||
</mat-radio-button>
|
||||
<mat-radio-button class="example-margin" value="accent">
|
||||
Accent
|
||||
</mat-radio-button>
|
||||
<mat-radio-button class="example-margin" value="warn">
|
||||
Warn
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</section>
|
||||
|
||||
<section class="example-section">
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
|
||||
</section>
|
||||
<section class="example-section">
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
|
||||
</section>
|
||||
|
||||
<section class="example-section">
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
|
||||
</section>
|
||||
</mat-card-content>
|
||||
<section class="example-section">
|
||||
<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
|
||||
</section>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="result">
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Result</h2>
|
||||
<mat-card-content>
|
||||
<h2 class="example-h2">Result</h2>
|
||||
|
||||
<section class="example-section">
|
||||
<mat-slide-toggle
|
||||
class="example-margin"
|
||||
[color]="color"
|
||||
[checked]="checked"
|
||||
[disabled]="disabled">
|
||||
Slide me!
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
</mat-card-content>
|
||||
<section class="example-section">
|
||||
<mat-slide-toggle
|
||||
class="example-margin"
|
||||
[color]="color"
|
||||
[checked]="checked"
|
||||
[disabled]="disabled">
|
||||
Slide me!
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
17
src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
Normal file → Executable file
17
src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
Normal file → Executable file
@@ -1,16 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Configurable slide-toggle
|
||||
*/
|
||||
@Component({
|
||||
selector : 'slide-toggle-configurable-example',
|
||||
templateUrl: 'slide-toggle-configurable-example.html',
|
||||
styleUrls : ['slide-toggle-configurable-example.css']
|
||||
selector: 'slide-toggle-configurable-example',
|
||||
templateUrl: 'slide-toggle-configurable-example.html',
|
||||
styleUrls: ['slide-toggle-configurable-example.css'],
|
||||
})
|
||||
export class SlideToggleConfigurableExample
|
||||
{
|
||||
color = 'accent';
|
||||
checked = false;
|
||||
disabled = false;
|
||||
export class SlideToggleConfigurableExample {
|
||||
color = 'accent';
|
||||
checked = false;
|
||||
disabled = false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user