purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-12-22 01:37:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

angular-in-memory-web-api updated,

Browse Source 
+ Http changed with HttpClient,
+ Angular Material Element examples added,
+ angular2-markdown Library added
This commit is contained in:
mustafahlvc
2017-09-27 19:40:59 +03:00
parent 52c5e6a18b
commit 8910e6f5dc
273 changed files with 5865 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css Normal file
View File

@@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

10
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html Normal file
View File

@@ -0,0 +1,10 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</md-option>
</md-autocomplete>
</md-form-field>
</form>

49
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts Normal file
View File

@@ -0,0 +1,49 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
export class User {
constructor(public name: string) { }
}
/**
* @title Display value autocomplete
*/
@Component({
selector: 'autocomplete-display-example',
templateUrl: 'autocomplete-display-example.html',
styleUrls: ['autocomplete-display-example.css']
})
export class AutocompleteDisplayExample {
myControl = new FormControl();
options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(user => user && typeof user === 'object' ? user.name : user)
.map(name => name ? this.filter(name) : this.options.slice());
}
filter(name: string): User[] {
return this.options.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
displayFn(user: User): string {
if (user){
return user.name;
}
}
}

9
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css Normal file
View File

@@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

10
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html Normal file
View File

@@ -0,0 +1,10 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
</md-form-field>
</form>

38
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts Normal file
View File

@@ -0,0 +1,38 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
/**
* @title Filter autocomplete
*/
@Component({
selector: 'autocomplete-filter-example',
templateUrl: 'autocomplete-filter-example.html',
styleUrls: ['autocomplete-filter-example.css']
})
export class AutocompleteFilterExample {
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(val => val ? this.filter(val) : this.options.slice());
}
filter(val: string): string[] {
return this.options.filter(option =>
option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}
}

9
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css Normal file
View File

@@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

20
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html Normal file
View File

@@ -0,0 +1,20 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</md-option>
</md-autocomplete>
</md-form-field>
<br />
<md-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
</md-slide-toggle>
</form>

59
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts Normal file
View File

@@ -0,0 +1,59 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
/**
* @title Autocomplete overview
*/
@Component({
selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample {
stateCtrl: FormControl;
filteredStates: Observable<any[]>;
states: any[] = [
{
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.startWith(null)
.map(state => state ? this.filterStates(state) : this.states.slice());
}
filterStates(name: string) {
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
}

9
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css Normal file
View File

@@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

10
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html Normal file
View File

@@ -0,0 +1,10 @@
<form class="example-form">
<md-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let option of options" [value]="option">
{{ option }}
</md-option>
</md-autocomplete>
</md-form-field>
</form>

22
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts Normal file
View File

@@ -0,0 +1,22 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
/**
* @title Simple autocomplete
*/
@Component({
selector: 'autocomplete-simple-example',
templateUrl: 'autocomplete-simple-example.html',
styleUrls: ['autocomplete-simple-example.css']
})
export class AutocompleteSimpleExample {
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
}

1
src/assets/angular-material-examples/button-overview/button-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/button-overview/button-overview-example.html Normal file
View File

@@ -0,0 +1 @@
<button md-button>Click me!</button>

10
src/assets/angular-material-examples/button-overview/button-overview-example.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic buttons
*/
@Component({
selector: 'button-overview-example',
templateUrl: 'button-overview-example.html',
})
export class ButtonOverviewExample {}

3
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css Normal file
View File

@@ -0,0 +1,3 @@
.example-selected-value {
margin: 15px 0;
}

15
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html Normal file
View File

@@ -0,0 +1,15 @@
<md-button-toggle-group #group="mdButtonToggleGroup">
<md-button-toggle value="left">
<md-icon>format_align_left</md-icon>
</md-button-toggle>
<md-button-toggle value="center">
<md-icon>format_align_center</md-icon>
</md-button-toggle>
<md-button-toggle value="right">
<md-icon>format_align_right</md-icon>
</md-button-toggle>
<md-button-toggle value="justify" disabled>
<md-icon>format_align_justify</md-icon>
</md-button-toggle>
</md-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>

11
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Exclusive selection
*/
@Component({
selector: 'button-toggle-exclusive-example',
templateUrl: 'button-toggle-exclusive-example.html',
styleUrls: ['button-toggle-exclusive-example.css'],
})
export class ButtonToggleExclusiveExample {}

1
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html Normal file
View File

@@ -0,0 +1 @@
<md-button-toggle>Toggle me!</md-button-toggle>

10
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic button-toggles
*/
@Component({
selector: 'button-toggle-overview-example',
templateUrl: 'button-toggle-overview-example.html',
})
export class ButtonToggleOverviewExample {}

5
src/assets/angular-material-examples/button-types/button-types-example.css Normal file
View File

@@ -0,0 +1,5 @@
.example-button-row {
display: flex;
align-items: center;
justify-content: space-around;
}

64
src/assets/angular-material-examples/button-types/button-types-example.html Normal file
View File

@@ -0,0 +1,64 @@
<h3>Basic Buttons</h3>
<div class="button-row">
<button md-button>Basic</button>
<button md-button color="primary">Primary</button>
<button md-button color="accent">Accent</button>
<button md-button color="warn">Warn</button>
<button md-button disabled>Disabled</button>
<a md-button routerLink=".">Link</a>
</div>
<h3>Raised Buttons</h3>
<div class="button-row">
<button md-raised-button>Basic</button>
<button md-raised-button color="primary">Primary</button>
<button md-raised-button color="accent">Accent</button>
<button md-raised-button color="warn">Warn</button>
<button md-raised-button disabled>Disabled</button>
<a md-raised-button routerLink=".">Link</a>
</div>
<h3>Icon Buttons</h3>
<div class="button-row">
<button md-icon-button>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button color="primary">
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button color="accent">
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button color="warn">
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<button md-icon-button disabled>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
</div>
<h3>Fab Buttons</h3>
<div class="button-row">
<button md-fab>Basic</button>
<button md-fab color="primary">Primary</button>
<button md-fab color="accent">Accent</button>
<button md-fab color="warn">Warn</button>
<button md-fab disabled>Disabled</button>
<button md-fab>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<a md-fab routerLink=".">Link</a>
</div>
<h3>Mini Fab Buttons</h3>
<div class="button-row">
<button md-mini-fab>Basic</button>
<button md-mini-fab color="primary">Primary</button>
<button md-mini-fab color="accent">Accent</button>
<button md-mini-fab color="warn">Warn</button>
<button md-mini-fab disabled>Disabled</button>
<button md-mini-fab>
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
</button>
<a md-mini-fab routerLink=".">Link</a>
</div>

11
src/assets/angular-material-examples/button-types/button-types-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Button varieties
*/
@Component({
selector: 'button-types-example',
templateUrl: 'button-types-example.html',
styleUrls: ['button-types-example.css'],
})
export class ButtonTypesExample {}

8
src/assets/angular-material-examples/card-fancy/card-fancy-example.css Normal file
View File

@@ -0,0 +1,8 @@
.example-card {
width: 400px;
}
.example-header-image {
background-image: url('/assets/images/examples/shiba1.jpg');
background-size: cover;
}

19
src/assets/angular-material-examples/card-fancy/card-fancy-example.html Normal file
View File

@@ -0,0 +1,19 @@
<md-card class="example-card">
<md-card-header>
<div md-card-avatar class="example-header-image"></div>
<md-card-title>Shiba Inu</md-card-title>
<md-card-subtitle>Dog Breed</md-card-subtitle>
</md-card-header>
<img md-card-image src="assets/images/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<md-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
<button md-button>SHARE</button>
</md-card-actions>
</md-card>

11
src/assets/angular-material-examples/card-fancy/card-fancy-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Card with multiple sections
*/
@Component({
selector: 'card-fancy-example',
templateUrl: 'card-fancy-example.html',
styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {}

1
src/assets/angular-material-examples/card-overview/card-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/card-overview/card-overview-example.html Normal file
View File

@@ -0,0 +1 @@
<md-card>Simple card</md-card>

10
src/assets/angular-material-examples/card-overview/card-overview-example.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic cards
*/
@Component({
selector: 'card-overview-example',
templateUrl: 'card-overview-example.html',
})
export class CardOverviewExample {}

39
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css Normal file
View File

@@ -0,0 +1,39 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
}
/*
* Styles to make the demo's cdk-table match the material design spec
* https://material.io/guidelines/components/data-tables.html
*/
.example-table {
flex: 1 1 auto;
overflow: auto;
max-height: 500px;
}
.example-header-row, .example-row {
display: flex;
border-bottom: 1px solid #ccc;
align-items: center;
height: 32px;
padding: 0 8px;
}
.example-cell, .example-header-cell {
flex: 1;
}
.example-header-cell {
font-size: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
}
.example-cell {
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
}

36
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html Normal file
View File

@@ -0,0 +1,36 @@
<div class="example-container mat-elevation-z8">
<cdk-table #table [dataSource]="dataSource" class="example-table">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container cdkColumnDef="userId">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
</ng-container>
<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="userName">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
</ng-container>
<!-- Color Column -->
<ng-container cdkColumnDef="color">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"
[style.color]="row.color">
{{row.color}}
</cdk-cell>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
</cdk-table>
</div>

92
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts Normal file
View File

@@ -0,0 +1,92 @@
import {Component} from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
/**
* @title Basic CDK data-table
*/
@Component({
selector: 'cdk-table-basic-example',
styleUrls: ['cdk-table-basic-example.css'],
templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample {
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
}
/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[] { return this.dataChange.value; }
constructor() {
// Fill up the database with 100 users.
for (let i = 0; i < 100; i++) { this.addUser(); }
}
/** Adds a new user to the database. */
addUser() {
const copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
}
/** Builds and returns a new User. */
private createNewUser() {
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: (this.data.length + 1).toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
}
/**
* Data source to provide what data should be rendered in the table. Note that the data source
* can retrieve its data in any way. In this case, the data source is provided a reference
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any> {
constructor(private _exampleDatabase: ExampleDatabase) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]> {
return this._exampleDatabase.dataChange;
}
disconnect() {}
}

14
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css Normal file
View File

@@ -0,0 +1,14 @@
.example-h2 {
margin: 10px;
}
.example-section {
display: flex;
align-content: center;
align-items: center;
height: 60px;
}
.example-margin {
margin: 0 10px;
}

40
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html Normal file
View File

@@ -0,0 +1,40 @@
<md-card>
<md-card-content>
<h2 class="example-h2">Checkbox configuration</h2>
<section class="example-section">
<md-checkbox class="example-margin" [(ngModel)]="checked">Checked</md-checkbox>
<md-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox>
</section>
<section class="example-section">
<label class="example-margin">Align:</label>
<md-radio-group [(ngModel)]="align">
<md-radio-button class="example-margin" value="start">Start</md-radio-button>
<md-radio-button class="example-margin" value="end">End</md-radio-button>
</md-radio-group>
</section>
<section class="example-section">
<md-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
</section>
</md-card-content>
</md-card>
<md-card class="result">
<md-card-content>
<h2 class="example-h2">Result</h2>
<section class="example-section">
<md-checkbox
class="example-margin"
[(ngModel)]="checked"
[(indeterminate)]="indeterminate"
[align]="align"
[disabled]="disabled">
I'm a checkbox
</md-checkbox>
</section>
</md-card-content>
</md-card>

16
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts Normal file
View File

@@ -0,0 +1,16 @@
import {Component} from '@angular/core';
/**
* @title Configurable checkbox
*/
@Component({
selector: 'checkbox-configurable-example',
templateUrl: 'checkbox-configurable-example.html',
styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample {
checked = false;
indeterminate = false;
align = 'start';
disabled = false;
}

1
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html Normal file
View File

@@ -0,0 +1 @@
<md-checkbox>Check me!</md-checkbox>

10
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic checkboxes
*/
@Component({
selector: 'checkbox-overview-example',
templateUrl: 'checkbox-overview-example.html',
})
export class CheckboxOverviewExample {}

3
src/assets/angular-material-examples/chips-input/chips-input-example.css Normal file
View File

@@ -0,0 +1,3 @@
.demo-chip-list {
width: 100%;
}

14
src/assets/angular-material-examples/chips-input/chips-input-example.html Normal file
View File

@@ -0,0 +1,14 @@
<md-form-field class="demo-chip-list">
<md-chip-list mdPrefix #chipList>
<md-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (remove)="remove(fruit)">
{{fruit.name}}
<md-icon mdChipRemove *ngIf="removable">cancel</md-icon>
</md-chip>
</md-chip-list>
<input mdInput placeholder="New fruit..."
[mdChipInputFor]="chipList"
[mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
[mdChipInputAddOnBlur]="addOnBlur"
(mdChipInputTokenEnd)="add($event)" />
</md-form-field>

52
src/assets/angular-material-examples/chips-input/chips-input-example.ts Normal file
View File

@@ -0,0 +1,52 @@
import {Component} from '@angular/core';
import {MdChipInputEvent, ENTER} from '@angular/material';
const COMMA = 188;
/**
* @title Chips with input
*/
@Component({
selector: 'chips-input-example',
templateUrl: 'chips-input-example.html',
styleUrls: ['chips-input-example.css']
})
export class ChipsInputExample {
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;
// Enter, comma
separatorKeysCodes = [ENTER, COMMA];
fruits = [
{ name: 'Lemon' },
{ name: 'Lime' },
{ name: 'Apple' },
];
add(event: MdChipInputEvent): void {
let input = event.input;
let value = event.value;
// Add our person
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(fruit: any): void {
let index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
}

1
src/assets/angular-material-examples/chips-overview/chips-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

6
src/assets/angular-material-examples/chips-overview/chips-overview-example.html Normal file
View File

@@ -0,0 +1,6 @@
<md-chip-list>
<md-chip>One fish</md-chip>
<md-chip>Two fish</md-chip>
<md-chip color="primary" selected="true">Primary fish</md-chip>
<md-chip color="accent" selected="true">Accent fish</md-chip>
</md-chip-list>

11
src/assets/angular-material-examples/chips-overview/chips-overview-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Basic chips
*/
@Component({
selector: 'chips-overview-example',
templateUrl: 'chips-overview-example.html',
styleUrls: ['chips-overview-example.css'],
})
export class ChipsOverviewExample {}

3
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css Normal file
View File

@@ -0,0 +1,3 @@
md-chip {
max-width: 200px;
}

7
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html Normal file
View File

@@ -0,0 +1,7 @@
<md-chip-list class="mat-chip-list-stacked">
<md-chip *ngFor="let chipColor of availableColors"
selected="true"
color="{{chipColor.color}}">
{{chipColor.name}}
</md-chip>
</md-chip-list>

20
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts Normal file
View File

@@ -0,0 +1,20 @@
import {Component} from '@angular/core';
/**
* @title Stacked chips
*/
@Component({
selector: 'chips-stacked-example',
templateUrl: 'chips-stacked-example.html',
styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample {
color: string;
availableColors = [
{ name: 'none', color: '' },
{ name: 'Primary', color: 'primary' },
{ name: 'Accent', color: 'accent' },
{ name: 'Warn', color: 'warn' }
];
}

1
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html Normal file
View File

@@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker #picker></md-datepicker>
</md-form-field>
<button md-raised-button (click)="picker.open()">Open</button>

12
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import {Component} from '@angular/core';
/**
* @title Datepicker API
*/
@Component({
selector: 'datepicker-api-example',
templateUrl: 'datepicker-api-example.html',
styleUrls: ['datepicker-api-example.css'],
})
export class DatepickerApiExample {
}

1
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html Normal file
View File

@@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [mdDatepickerFilter]="myFilter" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>

17
src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts Normal file
View File

@@ -0,0 +1,17 @@
import {Component} from '@angular/core';
/**
* @title Datepicker Filter
*/
@Component({
selector: 'datepicker-filter-example',
templateUrl: 'datepicker-filter-example.html',
styleUrls: ['datepicker-filter-example.css'],
})
export class DatepickerFilterExample {
myFilter = (d: Date): boolean => {
const day = d.getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
}
}

1
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html Normal file
View File

@@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [min]="minDate" [max]="maxDate" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>

14
src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts Normal file
View File

@@ -0,0 +1,14 @@
import {Component} from '@angular/core';
/**
* @title Datepicker Min Max
*/
@Component({
selector: 'datepicker-min-max-example',
templateUrl: 'datepicker-min-max-example.html',
styleUrls: ['datepicker-min-max-example.css'],
})
export class DatepickerMinMaxExample {
minDate = new Date(2000, 0, 1);
maxDate = new Date(2020, 0, 1);
}

1
src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html Normal file
View File

@@ -0,0 +1,5 @@
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>

11
src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Basic datepicker
*/
@Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html',
styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {}

1
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html Normal file
View File

@@ -0,0 +1,5 @@
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker startView="year" [startAt]="startDate"></md-datepicker>
</md-form-field>

13
src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts Normal file
View File

@@ -0,0 +1,13 @@
import {Component} from '@angular/core';
/**
* @title Datepicker start date
*/
@Component({
selector: 'datepicker-start-view-example',
templateUrl: 'datepicker-start-view-example.html',
styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
startDate = new Date(1990, 0, 1);
}

1
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html Normal file
View File

@@ -0,0 +1,5 @@
<md-form-field class="example-full-width">
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker touchUi="true" #picker></md-datepicker>
</md-form-field>

12
src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts Normal file
View File

@@ -0,0 +1,12 @@
import {Component} from '@angular/core';
/**
* @title Datepicker Touch
*/
@Component({
selector: 'datepicker-touch-example',
templateUrl: 'datepicker-touch-example.html',
styleUrls: ['datepicker-touch-example.css'],
})
export class DatepickerTouchExample {
}

25
src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html Normal file
View File

@@ -0,0 +1,25 @@
<h2 md-dialog-title>Install Angular</h2>
<md-dialog-content>
<h3>DEVELOP ACROSS ALL PLATFORMS</h3>
<p>Learn one way to build applications with Angular and reuse your code and abilities to build
apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
<h3>SPEED & PERFORMANCE</h3>
<p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements
by building data models on RxJS, Immutable.js or another push-model.</p>
<h3>INCREDIBLE TOOLING</h3>
<p>Build features quickly with simple, declarative templates. Extend the template language with your own
components and use a wide array of existing components. Get immediate Angular-specific help and feedback
with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather
than trying to make the code work.</p>
<h3>LOVED BY MILLIONS</h3>
<p>From prototype through global deployment, Angular delivers the productivity and scalable infrastructure
that supports Google's largest applications.</p>
</md-dialog-content>
<md-dialog-actions>
<button md-button [md-dialog-close]="true" tabindex="1">Install</button>
<button md-button md-dialog-close tabindex="-1">Cancel</button>
</md-dialog-actions>

1
src/assets/angular-material-examples/dialog-content/dialog-content-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/dialog-content/dialog-content-example.html Normal file
View File

@@ -0,0 +1 @@
<button md-button (click)="openDialog()">Open dialog</button>

29
src/assets/angular-material-examples/dialog-content/dialog-content-example.ts Normal file
View File

@@ -0,0 +1,29 @@
import {Component} from '@angular/core';
import {MdDialog} from '@angular/material';
/**
* @title Dialog with header, scrollable content and actions
*/
@Component({
selector: 'dialog-content-example',
templateUrl: 'dialog-content-example.html',
})
export class DialogContentExample {
constructor(public dialog: MdDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogContentExampleDialog, {
height: '350px'
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}
@Component({
selector: 'dialog-content-example-dialog',
templateUrl: 'dialog-content-example-dialog.html',
})
export class DialogContentExampleDialog {}

15
src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html Normal file
View File

@@ -0,0 +1,15 @@
<h1 md-dialog-title>Favorite Animal</h1>
<div md-dialog-content>
My favorite animal is:
<ul>
<li>
<span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
</li>
<li>
<span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
</li>
<li>
<span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
</li>
</ul>
</div>

1
src/assets/angular-material-examples/dialog-data/dialog-data-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/dialog-data/dialog-data-example.html Normal file
View File

@@ -0,0 +1 @@
<button md-button (click)="openDialog()">Open dialog</button>

29
src/assets/angular-material-examples/dialog-data/dialog-data-example.ts Normal file
View File

@@ -0,0 +1,29 @@
import {Component, Inject} from '@angular/core';
import {MdDialog, MD_DIALOG_DATA} from '@angular/material';
/**
* @title Injecting data when opening a dialog
*/
@Component({
selector: 'dialog-data-example',
templateUrl: 'dialog-data-example.html',
})
export class DialogDataExample {
constructor(public dialog: MdDialog) {}
openDialog() {
this.dialog.open(DialogDataExampleDialog, {
data: {
animal: 'panda'
}
});
}
}
@Component({
selector: 'dialog-data-example-dialog',
templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
constructor(@Inject(MD_DIALOG_DATA) public data: any) {}
}

5
src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html Normal file
View File

@@ -0,0 +1,5 @@
<h1 md-dialog-title>Dialog with elements</h1>
<div md-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
<div md-dialog-actions>
<button md-button md-dialog-close>Close</button>
</div>

1
src/assets/angular-material-examples/dialog-elements/dialog-elements-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html Normal file
View File

@@ -0,0 +1 @@
<button md-button (click)="openDialog()">Launch dialog</button>

24
src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts Normal file
View File

@@ -0,0 +1,24 @@
import {Component} from '@angular/core';
import {MdDialog} from '@angular/material';
/**
* @title Dialog elements
*/
@Component({
selector: 'dialog-elements-example',
templateUrl: 'dialog-elements-example.html',
})
export class DialogElementsExample {
constructor(public dialog: MdDialog) { }
openDialog() {
this.dialog.open(DialogElementsExampleDialog);
}
}
@Component({
selector: 'dialog-elements-example-dialog',
templateUrl: 'dialog-elements-example-dialog.html',
})
export class DialogElementsExampleDialog { }

11
src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html Normal file
View File

@@ -0,0 +1,11 @@
<h1 md-dialog-title>Hi {{data.name}}</h1>
<div md-dialog-content>
<p>What's your favorite animal?</p>
<md-form-field>
<input mdInput tabindex="1" [(ngModel)]="data.animal">
</md-form-field>
</div>
<div md-dialog-actions>
<button md-button [md-dialog-close]="data.animal" tabindex="2">Ok</button>
<button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

1
src/assets/angular-material-examples/dialog-overview/dialog-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

13
src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html Normal file
View File

@@ -0,0 +1,13 @@
<ol>
<li>
<md-form-field>
<input mdInput [(ngModel)]="name" placeholder="What's your name?">
</md-form-field>
</li>
<li>
<button md-raised-button (click)="openDialog()">Pick one</button>
</li>
<li *ngIf="animal">
You chose: <i>{{animal}}</i>
</li>
</ol>

46
src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts Normal file
View File

@@ -0,0 +1,46 @@
import {Component, Inject} from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
/**
* @title Dialog Overview
*/
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {
animal: string;
name: string;
constructor(public dialog: MdDialog) {}
openDialog(): void {
let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { name: this.name, animal: this.animal }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
constructor(
public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
@Inject(MD_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}

1
src/assets/angular-material-examples/expansion-overview/expansion-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

18
src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html Normal file
View File

@@ -0,0 +1,18 @@
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>

10
src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

9
src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css Normal file
View File

@@ -0,0 +1,9 @@
.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
flex-basis: 0;
}
.example-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}

69
src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html Normal file
View File

@@ -0,0 +1,69 @@
<md-accordion class="example-headers-align">
<md-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
<md-icon>account_circle</md-icon>
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput type="number" min="1" placeholder="Age">
</md-form-field>
<md-action-row>
<button md-button color="primary" (click)="nextStep()">Next</button>
</md-action-row>
</md-expansion-panel>
<md-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
<md-expansion-panel-header>
<md-panel-title>
Destination
</md-panel-title>
<md-panel-description>
Type the country name
<md-icon>map</md-icon>
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="Country">
</md-form-field>
<md-action-row>
<button md-button color="warn" (click)="prevStep()">Previous</button>
<button md-button color="primary" (click)="nextStep()">Next</button>
</md-action-row>
</md-expansion-panel>
<md-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
<md-expansion-panel-header>
<md-panel-title>
Day of the trip
</md-panel-title>
<md-panel-description>
Inform the date you wish to travel
<md-icon>date_range</md-icon>
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="Date" [mdDatepicker]="picker" (focus)="picker.open()" readonly>
</md-form-field>
<md-datepicker #picker></md-datepicker>
<md-action-row>
<button md-button color="warn" (click)="prevStep()">Previous</button>
<button md-button color="primary" (click)="nextStep()">End</button>
</md-action-row>
</md-expansion-panel>
</md-accordion>

25
src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts Normal file
View File

@@ -0,0 +1,25 @@
import {Component} from '@angular/core';
/**
* @title Expansion panel as accordion
*/
@Component({
selector: 'expansion-steps-example',
templateUrl: 'expansion-steps-example.html',
styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
step = 0;
setStep(index: number) {
this.step = index;
}
nextStep() {
this.step++;
}
prevStep() {
this.step--;
}
}

1
src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

9
src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html Normal file
View File

@@ -0,0 +1,9 @@
<md-grid-list cols="4" rowHeight="100px">
<md-grid-tile
*ngFor="let tile of tiles"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color">
{{tile.text}}
</md-grid-tile>
</md-grid-list>

17
src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts Normal file
View File

@@ -0,0 +1,17 @@
import {Component} from '@angular/core';
/**
* @title Dynamic grid-list
*/
@Component({
selector: 'grid-list-dynamic-example',
templateUrl: 'grid-list-dynamic-example.html',
})
export class GridListDynamicExample {
tiles = [
{text: 'One', cols: 3, rows: 1, color: 'lightblue'},
{text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
{text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
{text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
];
}

3
src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css Normal file
View File

@@ -0,0 +1,3 @@
md-grid-tile {
background: lightblue;
}

6
src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html Normal file
View File

@@ -0,0 +1,6 @@
<md-grid-list cols="2" rowHeight="2:1">
<md-grid-tile>1</md-grid-tile>
<md-grid-tile>2</md-grid-tile>
<md-grid-tile>3</md-grid-tile>
<md-grid-tile>4</md-grid-tile>
</md-grid-list>

11
src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts Normal file
View File

@@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Basic grid-list
*/
@Component({
selector: 'grid-list-overview-example',
styleUrls: ['grid-list-overview-example.css'],
templateUrl: 'grid-list-overview-example.html',
})
export class GridListOverviewExample {}

1
src/assets/angular-material-examples/icon-overview/icon-overview-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/icon-overview/icon-overview-example.html Normal file
View File

@@ -0,0 +1 @@
<md-icon>home</md-icon>

10
src/assets/angular-material-examples/icon-overview/icon-overview-example.ts Normal file
View File

@@ -0,0 +1,10 @@
import {Component} from '@angular/core';
/**
* @title Basic icons
*/
@Component({
selector: 'icon-overview-example',
templateUrl: 'icon-overview-example.html',
})
export class IconOverviewExample {}

1
src/assets/angular-material-examples/icon-svg/icon-svg-example.css Normal file
View File

@@ -0,0 +1 @@
/** No CSS for this example */

1
src/assets/angular-material-examples/icon-svg/icon-svg-example.html Normal file
View File

@@ -0,0 +1 @@
<md-icon svgIcon="thumbs-up"></md-icon>

18
src/assets/angular-material-examples/icon-svg/icon-svg-example.ts Normal file
View File

@@ -0,0 +1,18 @@
import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {MdIconRegistry} from '@angular/material';
/**
* @title SVG icons
*/
@Component({
selector: 'icon-svg-example',
templateUrl: 'icon-svg-example.html',
})
export class IconSvgExample {
constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
}
}

Some files were not shown because too many files have changed in this diff Show More