-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
a11y(grid-list): Add grid list to accessibility demo page (#6091)
* real world example * remove roles * feat: expose version object in releases (#4962) * In releases there will be a constant called `VERSION` that holds the current version of the installed package (material or cdk) * This is similar as for every @angular package like core, forms, compiler. Add accessibility demo page for grid list . * change header and add roles
- Loading branch information
1 parent
3a766f1
commit 8a23157
Showing
8 changed files
with
83 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<section> | ||
<h2>Types of coffee (fix-height grid-list)</h2> | ||
<md-grid-list role="list" [cols]="fixedCols" [rowHeight]="fixedRowHeight"> | ||
<md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows" | ||
[style.background]="tile.color" role="listitem"> | ||
{{tile.text}} | ||
</md-grid-tile> | ||
</md-grid-list> | ||
</section> | ||
|
||
<section> | ||
<h2>Types of coffee (ratio-height grid list)</h2> | ||
<md-grid-list role="list" cols="2" [rowHeight]="ratio" gutterSize="4px"> | ||
<md-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'" role="listitem"> | ||
{{tile.text}} | ||
</md-grid-tile> | ||
</md-grid-list> | ||
</section> | ||
|
||
<section> | ||
<h2>Types of coffee (fit-height grid list)</h2> | ||
<md-grid-list role="list" cols="2" rowHeight="fit" [gutterSize]="ratioGutter" | ||
[style.height]="fitListHeight"> | ||
<md-grid-tile *ngFor="let tile of tiles" role="listitem" [style.background]="'#F1EBBA'"> | ||
{{tile.text}} | ||
</md-grid-tile> | ||
</md-grid-list> | ||
</section> | ||
|
||
<section> | ||
<h2>Angular team dogs (Grid list with header and footer)</h2> | ||
<md-grid-list role="list" cols="3" rowHeight="200px"> | ||
<md-grid-tile *ngFor="let dog of dogs" role="listitem"> | ||
<md-grid-tile-header>{{dog.name}}</md-grid-tile-header> | ||
<img alt="Photo of {{dog.name}}" | ||
src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png"> | ||
<md-grid-tile-footer> | ||
<span md-line>Human: {{dog.human}}</span> | ||
</md-grid-tile-footer> | ||
</md-grid-tile> | ||
</md-grid-list> | ||
</section> |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
export interface Dog { | ||
name: string; | ||
human: string; | ||
} | ||
|
||
@Component({ | ||
moduleId: module.id, | ||
selector: 'grid-list-a11y', | ||
templateUrl: 'grid-list-a11y.html', | ||
styleUrls: ['grid-list-a11y.css'], | ||
}) | ||
export class GridListAccessibilityDemo { | ||
dogs: Dog[] = [ | ||
{ name: 'Porter', human: 'Kara' }, | ||
{ name: 'Mal', human: 'Jeremy' }, | ||
{ name: 'Koby', human: 'Igor' }, | ||
{ name: 'Razzle', human: 'Ward' }, | ||
{ name: 'Molly', human: 'Rob' }, | ||
{ name: 'Husi', human: 'Matias' }, | ||
]; | ||
|
||
tiles = [ | ||
{text: 'Cappuccino', cols: 3, rows: 1, color: 'lightblue'}, | ||
{text: 'Mocha', cols: 1, rows: 2, color: 'lightgreen'}, | ||
{text: 'Latte', cols: 1, rows: 1, color: 'lightpink'}, | ||
{text: 'Iced coffee', cols: 2, rows: 1, color: '#DDBDF1'}, | ||
]; | ||
|
||
fixedCols = 4; | ||
fixedRowHeight = 100; | ||
ratioGutter = 1; | ||
fitListHeight = '400px'; | ||
ratio = '4:1'; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters