Skip to content

Commit c479faa

Browse files
amcdnljelbourn
authored andcommitted
docs(demos): add a variety of button demos (#5628)
1 parent a40ad26 commit c479faa

File tree

2 files changed

+62
-19
lines changed

2 files changed

+62
-19
lines changed

src/material-examples/button-types/button-types-example.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.example-container {
2-
width: 500px;
3-
}
4-
51
.example-button-row {
62
display: flex;
73
align-items: center;
Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,64 @@
1-
<div class="example-container">
2-
<h3>Normal Buttons</h3>
3-
<div class="button-row">
4-
<button md-button>Flat button</button>
5-
<button md-raised-button>Raised button</button>
6-
<button md-fab><md-icon>check</md-icon></button>
7-
<button md-mini-fab><md-icon>check</md-icon></button>
8-
</div>
1+
<h3>Basic Buttons</h3>
2+
<div class="button-row">
3+
<button md-button>Basic</button>
4+
<button md-button color="primary">Primary</button>
5+
<button md-button color="accent">Accent</button>
6+
<button md-button color="warn">Warn</button>
7+
<button md-button disabled>Disabled</button>
8+
<a md-button routerLink=".">Link</a>
9+
</div>
10+
11+
<h3>Raised Buttons</h3>
12+
<div class="button-row">
13+
<button md-raised-button>Basic</button>
14+
<button md-raised-button color="primary">Primary</button>
15+
<button md-raised-button color="accent">Accent</button>
16+
<button md-raised-button color="warn">Warn</button>
17+
<button md-raised-button disabled>Disabled</button>
18+
<a md-raised-button routerLink=".">Link</a>
19+
</div>
20+
21+
<h3>Icon Buttons</h3>
22+
<div class="button-row">
23+
<button md-icon-button>
24+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
25+
</button>
26+
<button md-icon-button color="primary">
27+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
28+
</button>
29+
<button md-icon-button color="accent">
30+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
31+
</button>
32+
<button md-icon-button color="warn">
33+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
34+
</button>
35+
<button md-icon-button disabled>
36+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
37+
</button>
38+
</div>
39+
40+
<h3>Fab Buttons</h3>
41+
<div class="button-row">
42+
<button md-fab>Basic</button>
43+
<button md-fab color="primary">Primary</button>
44+
<button md-fab color="accent">Accent</button>
45+
<button md-fab color="warn">Warn</button>
46+
<button md-fab disabled>Disabled</button>
47+
<button md-fab>
48+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
49+
</button>
50+
<a md-fab routerLink=".">Link</a>
51+
</div>
952

10-
<h3>Link Buttons</h3>
11-
<div class="example-button-row">
12-
<a md-button routerLink=".">Flat button</a>
13-
<a md-raised-button routerLink=".">Raised button</a>
14-
<a md-fab routerLink="."><md-icon>check</md-icon></a>
15-
<a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
16-
</div>
53+
<h3>Mini Fab Buttons</h3>
54+
<div class="button-row">
55+
<button md-mini-fab>Basic</button>
56+
<button md-mini-fab color="primary">Primary</button>
57+
<button md-mini-fab color="accent">Accent</button>
58+
<button md-mini-fab color="warn">Warn</button>
59+
<button md-mini-fab disabled>Disabled</button>
60+
<button md-mini-fab>
61+
<md-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</md-icon>
62+
</button>
63+
<a md-mini-fab routerLink=".">Link</a>
1764
</div>

0 commit comments

Comments
 (0)