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

docs(demos): add a variety of button demos (#5628)

Browse Source
This commit is contained in:
Austin
2017-07-13 12:22:56 -05:00
committed by Jeremy Elbourn
parent a40ad26288
commit c479faad6c
2 changed files with 63 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/material-examples/button-types/button-types-example.css
-4
View File
@@ -1,7 +1,3 @@
.example-container {
width: 500px;
}
.example-button-row {
display: flex;
align-items: center;
src/material-examples/button-types/button-types-example.html
+63 -16
View File
@@ -1,17 +1,64 @@
<div class="example-container">
<h3>Normal Buttons</h3>
<div class="button-row">
<button md-button>Flat button</button>
<button md-raised-button>Raised button</button>
<button md-fab><md-icon>check</md-icon></button>
<button md-mini-fab><md-icon>check</md-icon></button>
</div>
<h3>Link Buttons</h3>
<div class="example-button-row">
<a md-button routerLink=".">Flat button</a>
<a md-raised-button routerLink=".">Raised button</a>
<a md-fab routerLink="."><md-icon>check</md-icon></a>
<a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
</div>
<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>