Skip to content

Commit 40c2e00

Browse files
EladBezalelEladBezalel
committed
docs(button): enhance button docs and examples
1 parent 4dd8a31 commit 40c2e00

12 files changed

+138
-82
lines changed

‎src/material-examples/button-card/button-card-example.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/** No CSS for this example */

‎src/material-examples/button-card/button-card-example.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<mat-card>
2+
<mat-card-header>
3+
<mat-card-title>Card with action buttons</mat-card-title>
4+
</mat-card-header>
5+
<mat-card-actions align="end">
6+
<button mat-button aria-label="Example cancel button in card">Cancel</button>
7+
<button mat-button aria-label="Example accept button in card" color="primary">Accept</button>
8+
</mat-card-actions>
9+
</mat-card>

‎src/material-examples/button-card/button-card-example.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Button usage in cards
5+
*/
6+
@Component({
7+
selector: 'button-card-example',
8+
templateUrl: 'button-card-example.html',
9+
styleUrls: ['button-card-example.css'],
10+
})
11+
export class ButtonCardExample {}

‎src/material-examples/button-overview/button-overview-example.css

+16-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
/** No CSS for this example */
1+
.example-button-row {
2+
background: #f3f3f3;
3+
padding: 16px;
4+
border-radius: 3px;
5+
display: flex;
6+
justify-content: center;
7+
}
8+
9+
.example-button-row .mat-button,
10+
.example-button-row .mat-raised-button,
11+
.example-button-row .mat-icon-button,
12+
.example-button-row .mat-fab,
13+
.example-button-row .mat-mini-fab {
14+
text-transform: uppercase;
15+
margin: 0 8px;
16+
}

‎src/material-examples/button-overview/button-overview-example.html

+76-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,76 @@
1-
<button mat-button>Click me!</button>
1+
<h3>Basic Buttons</h3>
2+
<div class="example-button-row">
3+
<button mat-button aria-label="Example flat button">Basic</button>
4+
<button mat-button aria-label="Example flat primary colored button" color="primary">Primary</button>
5+
<button mat-button aria-label="Example flat accent colored button" color="accent">Accent</button>
6+
<button mat-button aria-label="Example flat warn colored button" color="warn">Warn</button>
7+
<button mat-button aria-label="Example flat disabled button" disabled>Disabled</button>
8+
<a mat-button aria-label="Example flat anchor button" routerLink=".">Link</a>
9+
</div>
10+
11+
<h3>Raised Buttons</h3>
12+
<div class="example-button-row">
13+
<button mat-raised-button aria-label="Example raised button">Basic</button>
14+
<button mat-raised-button aria-label="Example raised primary colored button" color="primary">Primary</button>
15+
<button mat-raised-button aria-label="Example raised accent colored button" color="accent">Accent</button>
16+
<button mat-raised-button aria-label="Example raised warn colored button" color="warn">Warn</button>
17+
<button mat-raised-button aria-label="Example raised disabled button" disabled>Disabled</button>
18+
<a mat-raised-button aria-label="Example raised anchor button" routerLink=".">Link</a>
19+
</div>
20+
21+
<h3>Icon Buttons</h3>
22+
<div class="example-button-row">
23+
<button mat-icon-button aria-label="Example icon-button with a heart icon">
24+
<mat-icon>favorite</mat-icon>
25+
</button>
26+
<button mat-icon-button color="primary" aria-label="Example icon-button with a more vertical icon">
27+
<mat-icon>more_vert</mat-icon>
28+
</button>
29+
<button mat-icon-button color="accent" aria-label="Example icon-button with a launch icon">
30+
<mat-icon>launch</mat-icon>
31+
</button>
32+
<button mat-icon-button color="warn" aria-label="Example icon-button with a menu icon">
33+
<mat-icon>menu</mat-icon>
34+
</button>
35+
<button mat-icon-button disabled aria-label="Example icon-button with a close icon">
36+
<mat-icon>close</mat-icon>
37+
</button>
38+
</div>
39+
40+
<h3>Fab Buttons</h3>
41+
<div class="example-button-row">
42+
<button mat-fab aria-label="Example icon-button with a people icon">
43+
<mat-icon>add</mat-icon>
44+
</button>
45+
<button mat-fab color="primary" aria-label="Example icon-button with a people icon">
46+
<mat-icon>people</mat-icon>
47+
</button>
48+
<button mat-fab color="warn" aria-label="Example icon-button with a star icon">
49+
<mat-icon>star</mat-icon>
50+
</button>
51+
<button mat-fab disabled aria-label="Example icon-button with a comment icon">
52+
<mat-icon>comment</mat-icon>
53+
</button>
54+
<button mat-fab aria-label="Example icon-button with a cake icon">
55+
<mat-icon>cake</mat-icon>
56+
</button>
57+
</div>
58+
59+
<h3>Mini Fab Buttons</h3>
60+
<div class="example-button-row">
61+
<button mat-mini-fab aria-label="Example icon-button with a people icon">
62+
<mat-icon>add</mat-icon>
63+
</button>
64+
<button mat-mini-fab color="primary" aria-label="Example icon-button with a people icon">
65+
<mat-icon>people</mat-icon>
66+
</button>
67+
<button mat-mini-fab color="warn" aria-label="Example icon-button with a star icon">
68+
<mat-icon>star</mat-icon>
69+
</button>
70+
<button mat-mini-fab disabled aria-label="Example icon-button with a comment icon">
71+
<mat-icon>comment</mat-icon>
72+
</button>
73+
<button mat-mini-fab aria-label="Example icon-button with a cake icon">
74+
<mat-icon>cake</mat-icon>
75+
</button>
76+
</div>

‎src/material-examples/button-overview/button-overview-example.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ import {Component} from '@angular/core';
66
@Component({
77
selector: 'button-overview-example',
88
templateUrl: 'button-overview-example.html',
9+
styleUrls: ['button-overview-example.css']
910
})
1011
export class ButtonOverviewExample {}

‎src/material-examples/button-toolbar/button-toolbar-example.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-spacer {
2+
flex: 1;
3+
}

‎src/material-examples/button-toolbar/button-toolbar-example.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<mat-toolbar color="primary">
2+
<button mat-icon-button aria-label="Example icon-button with a menu icon">
3+
<mat-icon>menu</mat-icon>
4+
</button>
5+
<span>Toolbar with icon buttons</span>
6+
<span class="example-spacer"></span>
7+
<button mat-icon-button aria-label="Example icon-button with a more vertical icon">
8+
<mat-icon>more_vert</mat-icon>
9+
</button>
10+
</mat-toolbar>

‎src/material-examples/button-toolbar/button-toolbar-example.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Icon button usage in toolbar
5+
*/
6+
@Component({
7+
selector: 'button-toolbar-example',
8+
templateUrl: 'button-toolbar-example.html',
9+
styleUrls: ['button-toolbar-example.css'],
10+
})
11+
export class ButtonToolbarExample {}

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

-5
This file was deleted.

‎src/material-examples/button-types/button-types-example.html

-64
This file was deleted.

‎src/material-examples/button-types/button-types-example.ts

-11
This file was deleted.

0 commit comments

Comments
 (0)