mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs(table): switch to md- prefix (#6175)
This commit is contained in:
Andrew Seguin
committed by
tinayuangao
tinayuangao
parent
4168fb39db
commit
2364cfe8ab
@@ -5,30 +5,30 @@
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container cdkColumnDef="userId">
|
||||
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
|
||||
<ng-container mdColumnDef="userId">
|
||||
<md-header-cell *mdHeaderCellDef> ID </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container cdkColumnDef="progress">
|
||||
<md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
<ng-container mdColumnDef="progress">
|
||||
<md-header-cell *mdHeaderCellDef> Progress </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container cdkColumnDef="userName">
|
||||
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
|
||||
<ng-container mdColumnDef="userName">
|
||||
<md-header-cell *mdHeaderCellDef> Name </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container cdkColumnDef="color">
|
||||
<md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
<ng-container mdColumnDef="color">
|
||||
<md-header-cell *mdHeaderCellDef>Color</md-header-cell>
|
||||
<md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
</div>
|
||||
|
||||
@@ -11,30 +11,30 @@
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container cdkColumnDef="userId">
|
||||
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
|
||||
<ng-container mdColumnDef="userId">
|
||||
<md-header-cell *mdHeaderCellDef> ID </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container cdkColumnDef="progress">
|
||||
<md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
<ng-container mdColumnDef="progress">
|
||||
<md-header-cell *mdHeaderCellDef> Progress </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container cdkColumnDef="userName">
|
||||
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
|
||||
<ng-container mdColumnDef="userName">
|
||||
<md-header-cell *mdHeaderCellDef> Name </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container cdkColumnDef="color">
|
||||
<md-header-cell *cdkHeaderCellDef> Color </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
<ng-container mdColumnDef="color">
|
||||
<md-header-cell *mdHeaderCellDef> Color </md-header-cell>
|
||||
<md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
</div>
|
||||
|
||||
@@ -14,35 +14,35 @@
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- Number Column -->
|
||||
<ng-container cdkColumnDef="number">
|
||||
<md-header-cell *cdkHeaderCellDef>#</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">{{ row.number }}</md-cell>
|
||||
<ng-container mdColumnDef="number">
|
||||
<md-header-cell *mdHeaderCellDef>#</md-header-cell>
|
||||
<md-cell *mdCellDef="let row">{{ row.number }}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Title Column -->
|
||||
<ng-container cdkColumnDef="title">
|
||||
<md-header-cell *cdkHeaderCellDef>Title</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">{{ row.title }}</md-cell>
|
||||
<ng-container mdColumnDef="title">
|
||||
<md-header-cell *mdHeaderCellDef>Title</md-header-cell>
|
||||
<md-cell *mdCellDef="let row">{{ row.title }}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- State Column -->
|
||||
<ng-container cdkColumnDef="state">
|
||||
<md-header-cell *cdkHeaderCellDef>State</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">{{ row.state }}</md-cell>
|
||||
<ng-container mdColumnDef="state">
|
||||
<md-header-cell *mdHeaderCellDef>State</md-header-cell>
|
||||
<md-cell *mdCellDef="let row">{{ row.state }}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Created Column -->
|
||||
<ng-container cdkColumnDef="created_at">
|
||||
<md-header-cell *cdkHeaderCellDef
|
||||
<ng-container mdColumnDef="created_at">
|
||||
<md-header-cell *mdHeaderCellDef
|
||||
md-sort-header
|
||||
disableClear="true">
|
||||
Created
|
||||
</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">{{ row.created_at | date }}</md-cell>
|
||||
<md-cell *mdCellDef="let row">{{ row.created_at | date }}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
|
||||
<md-paginator [length]="dataSource.resultsLength"
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container cdkColumnDef="select">
|
||||
<md-header-cell *cdkHeaderCellDef>
|
||||
<ng-container mdColumnDef="select">
|
||||
<md-header-cell *mdHeaderCellDef>
|
||||
<md-checkbox (change)="$event ? masterToggle() : null"
|
||||
[checked]="isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()">
|
||||
</md-checkbox>
|
||||
</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">
|
||||
<md-cell *mdCellDef="let row">
|
||||
<md-checkbox (click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row.id) : null"
|
||||
[checked]="selection.isSelected(row.id)">
|
||||
@@ -34,31 +34,31 @@
|
||||
</ng-container>
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container cdkColumnDef="userId">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> ID </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
|
||||
<ng-container mdColumnDef="userId">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> ID </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container cdkColumnDef="progress">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> Progress </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
<ng-container mdColumnDef="progress">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> Progress </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container cdkColumnDef="userName">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> Name </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
|
||||
<ng-container mdColumnDef="userName">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> Name </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container cdkColumnDef="color">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> Color </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
<ng-container mdColumnDef="color">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> Color </md-header-cell>
|
||||
<md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"
|
||||
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *mdRowDef="let row; columns: displayedColumns;"
|
||||
[class.example-selected-row]="selection.isSelected(row.id)"
|
||||
(click)="selection.toggle(row.id)">
|
||||
</md-row>
|
||||
|
||||
@@ -6,31 +6,31 @@
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container cdkColumnDef="userId">
|
||||
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
|
||||
<ng-container mdColumnDef="userId">
|
||||
<md-header-cell *mdHeaderCellDef> ID </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container cdkColumnDef="progress">
|
||||
<md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
<ng-container mdColumnDef="progress">
|
||||
<md-header-cell *mdHeaderCellDef> Progress </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container cdkColumnDef="userName">
|
||||
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
|
||||
<ng-container mdColumnDef="userName">
|
||||
<md-header-cell *mdHeaderCellDef> Name </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container cdkColumnDef="color">
|
||||
<md-header-cell *cdkHeaderCellDef> Color </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
<ng-container mdColumnDef="color">
|
||||
<md-header-cell *mdHeaderCellDef> Color </md-header-cell>
|
||||
<md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
|
||||
<md-paginator #paginator
|
||||
|
||||
@@ -5,30 +5,30 @@
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container cdkColumnDef="userId">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> ID </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
|
||||
<ng-container mdColumnDef="userId">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> ID </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.id}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container cdkColumnDef="progress">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> Progress </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
<ng-container mdColumnDef="progress">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> Progress </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.progress}}% </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container cdkColumnDef="userName">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> Name </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
|
||||
<ng-container mdColumnDef="userName">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> Name </md-header-cell>
|
||||
<md-cell *mdCellDef="let row"> {{row.name}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container cdkColumnDef="color">
|
||||
<md-header-cell *cdkHeaderCellDef md-sort-header> Color </md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
<ng-container mdColumnDef="color">
|
||||
<md-header-cell *mdHeaderCellDef md-sort-header> Color </md-header-cell>
|
||||
<md-cell *mdCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
||||
</ng-container>
|
||||
|
||||
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
|
||||
<md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
|
||||
</md-table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user