skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add more demos in button accessibility demo page (#6099)

Browse Source
This commit is contained in:
tinayuangao
2017-08-01 14:39:35 -07:00
committed by GitHub
parent 7a7ec7a602
commit a503e19898
3 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/a11y/button/button-a11y.html
+51 -28
View File
@@ -1,29 +1,52 @@
<section>
<h2>Button elements</h2>
<button md-button>check</button>
<button md-raised-button>raised</button>
<button md-fab aria-label="Activate floating action style button">
<md-icon class="md-24">check</md-icon>
</button>
<button md-mini-fab aria-label="Activate mini floating action style button">
<md-icon class="md-24">check</md-icon>
</button>
<button md-icon-button aria-label="Activate icon style button">
<md-icon class="md-24">check</md-icon>
</button>
</section>
<div class="demo-button">
<section>
<h2>Button elements</h2>
<p>Click on the buttons to increase the button counter.</p>
<p>Current number of clicks: {{counter}}</p>
<button md-button (click)="increase()">Check</button>
<button md-raised-button (click)="increase()">Pitch</button>
<button md-fab (click)="increase()"
aria-label="Activate floating action style button to increase the button counter">
<md-icon class="md-24">plus_one</md-icon>
</button>
<button md-mini-fab (click)="increase()"
aria-label="Mini floating action button to increase the button counter by 1">
<md-icon class="md-24">plus_one</md-icon>
</button>
<button md-icon-button (click)="increase()"
aria-label="Icon button to increase the button counter by 1">
<md-icon class="md-24">plus_one</md-icon>
</button>
</section>
<section>
<h2>Anchor elements</h2>
<a href="http://www.google.com" md-button color="primary">Google search</a>
<a href="http://www.google.com" md-raised-button>Google search</a>
<a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
<md-icon class="md-24">check</md-icon>
</a>
<a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
<md-icon class="md-24">check</md-icon>
</a>
<a md-icon-button aria-label="Activate icon style link">
<md-icon class="md-24">check</md-icon>
</a>
</section>
<section>
<h2>Anchor elements</h2>
<a href="http://www.google.com" md-button color="primary">Google search</a>
<a href="https://www.youtube.com/" md-raised-button>YouTube</a>
<a href="http://www.google.com" md-fab
aria-label="Activate floating action style google search link">
<md-icon class="md-24">search</md-icon>
</a>
<a href="http://www.google.com" md-mini-fab
aria-label="Activate mini floating action style google search link">
<md-icon class="md-24">search</md-icon>
</a>
<a href="http://www.google.com" md-icon-button
aria-label="Activate icon style google search link">
<md-icon class="md-24">search</md-icon>
</a>
</section>
<section>
<h2>Buttons in different colors</h2>
<button md-button color="primary">Primary</button>
<button md-button color="accent">Accent</button>
<button md-button color="warn">Warn</button>
</section>
<section>
<h2>Disabled button</h2>
<p>The following "cancel" button is disabled</p>
<button md-button [disabled]="true">Cancel</button>
</section>
</div>
src/demo-app/a11y/button/button-a11y.scss
-12
View File
@@ -1,18 +1,6 @@
.demo-button {
button, a {
margin: 8px;
text-transform: uppercase;
}
section {
display: flex;
align-items: center;
margin: 8px;
}
p {
padding: 5px 15px;
}
}
src/demo-app/a11y/button/button-a11y.ts
+5 -1
View File
@@ -8,5 +8,9 @@ import {Component} from '@angular/core';
styleUrls: ['button-a11y.css'],
})
export class ButtonAccessibilityDemo {
// TODO(tinayuangao): Add use cases
counter: number = 0;
increase() {
this.counter++;
}
}