purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Angular Material Examples) Updated the examples

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-10 12:26:29 +03:00
parent 23b86a7e3d
commit 8b14366763
11 changed files with 159 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
View File

@ -3,19 +3,19 @@
<ng-container cdkColumnDef="position"> <ng-container cdkColumnDef="position">
<th cdk-header-cell *cdkHeaderCellDef> No. </th> <th cdk-header-cell *cdkHeaderCellDef> No. </th>
<td cdk-cell *cdkCellDef="let element"> {{element.position}} </td> <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container cdkColumnDef="name">
<th cdk-header-cell *cdkHeaderCellDef> Name </th> <th cdk-header-cell *cdkHeaderCellDef> Name </th>
<td cdk-cell *cdkCellDef="let element"> {{element.name}} </td> <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Weight Column -->
<ng-container cdkColumnDef="weight"> <ng-container cdkColumnDef="weight">
<th cdk-header-cell *cdkHeaderCellDef> Weight </th> <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
<td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td> <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container cdkColumnDef="symbol"> <ng-container cdkColumnDef="symbol">

2
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
View File

@ -20,7 +20,7 @@ export interface PeriodicElement {
position: number; position: number;
weight: number; weight: number;
symbol: string; symbol: string;
} }
const ELEMENT_DATA: PeriodicElement[] = [ const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},

50
src/assets/angular-material-examples/table-basic/table-basic-example.html
View File

@ -1,33 +1,33 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order. <!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" --> The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="position"> <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th> <th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td> <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th> <th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Weight Column -->
<ng-container matColumnDef="weight"> <ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th> <th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td> <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="symbol"> <ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th> <th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>

52
src/assets/angular-material-examples/table-filtering/table-filtering-example.html
View File

@ -1,33 +1,33 @@
<mat-form-field> <mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="position"> <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th> <th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td> <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th> <th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Weight Column -->
<ng-container matColumnDef="weight"> <ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th> <th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td> <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="symbol"> <ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th> <th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>

12
src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
View File

@ -1,17 +1,17 @@
<table mat-table [dataSource]="transactions" class="mat-elevation-z8"> <table mat-table [dataSource]="transactions" class="mat-elevation-z8">
<!-- Item Column --> <!-- Item Column -->
<ng-container matColumnDef="item"> <ng-container matColumnDef="item">
<th mat-header-cell *matHeaderCellDef> Item </th> <th mat-header-cell *matHeaderCellDef> Item </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td> <td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td> <td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container> </ng-container>
<!-- Cost Column --> <!-- Cost Column -->
<ng-container matColumnDef="cost"> <ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th> <th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td> <td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td> <td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

50
src/assets/angular-material-examples/table-http/table-http-example.html
View File

@ -10,36 +10,36 @@
<div class="example-table-container"> <div class="example-table-container">
<table mat-table [dataSource]="data" class="example-table" <table mat-table [dataSource]="data" class="example-table"
matSort matSortActive="created" matSortDisableClear matSortDirection="asc"> matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
<!-- Number Column --> <!-- Number Column -->
<ng-container matColumnDef="number"> <ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>#</th> <th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let row">{{ row.number }}</td> <td mat-cell *matCellDef="let row">{{ row.number }}</td>
</ng-container> </ng-container>
<!-- Title Column --> <!-- Title Column -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th> <th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let row">{{ row.title }}</td> <td mat-cell *matCellDef="let row">{{ row.title }}</td>
</ng-container> </ng-container>
<!-- State Column --> <!-- State Column -->
<ng-container matColumnDef="state"> <ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>State</th> <th mat-header-cell *matHeaderCellDef>State</th>
<td mat-cell *matCellDef="let row">{{ row.state }}</td> <td mat-cell *matCellDef="let row">{{ row.state }}</td>
</ng-container> </ng-container>
<!-- Created Column --> <!-- Created Column -->
<ng-container matColumnDef="created"> <ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true"> <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
Created Created
</th> </th>
<td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td> <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>

6
src/assets/angular-material-examples/table-overview/table-overview-example.html
View File

@ -1,6 +1,6 @@
<mat-form-field> <mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>
<div class="mat-elevation-z8"> <div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort> <table mat-table [dataSource]="dataSource" matSort>

80
src/assets/angular-material-examples/table-selection/table-selection-example.html
View File

@ -1,47 +1,47 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column --> <!-- Checkbox Column -->
<ng-container matColumnDef="select"> <ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null" <mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"> [indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox> </mat-checkbox>
</th> </th>
<td mat-cell *matCellDef="let row"> <td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" <mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"> [checked]="selection.isSelected(row)">
</mat-checkbox> </mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="position"> <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th> <th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td> <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th> <th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Weight Column -->
<ng-container matColumnDef="weight"> <ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th> <th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td> <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="symbol"> <ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th> <th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" <tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)"> (click)="selection.toggle(row)">
</tr> </tr>
</table> </table>

46
src/assets/angular-material-examples/table-sorting/table-sorting-example.html
View File

@ -1,29 +1,29 @@
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="position"> <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td> <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Weight Column -->
<ng-container matColumnDef="weight"> <ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td> <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container> </ng-container>
<!-- Symbol Column --> <!-- Symbol Column -->
<ng-container matColumnDef="symbol"> <ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td> <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>

4
src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
View File

@ -3,8 +3,8 @@
<mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption"> <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
{{ positionOption }} {{ positionOption }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-raised-button <button mat-raised-button
matTooltip="Info about the action" matTooltip="Info about the action"

5
src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
View File

@ -100,7 +100,10 @@ export class DynamicDataSource {
new DynamicFlatNode(name, node.level + 1, this.database.isExpandable(name))); new DynamicFlatNode(name, node.level + 1, this.database.isExpandable(name)));
this.data.splice(index + 1, 0, ...nodes); this.data.splice(index + 1, 0, ...nodes);
} else { } else {
this.data.splice(index + 1, children.length); let count = 0;
for (let i = index + 1; i < this.data.length
&& this.data[i].level > node.level; i++, count++) {}
this.data.splice(index + 1, count);
} }
// notify the change // notify the change