Skip to content

Commit 7e88ab6

Browse files
EladBezalelEladBezalel
committed
docs(button): enhance button docs and examples
1 parent 0f954a0 commit 7e88ab6

13 files changed

+151
-87
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>CANCEL</button>
7+
<button mat-button 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+
.button-row {
2+
background: #f3f3f3;
3+
padding: 16px;
4+
border-radius: 3px;
5+
display: flex;
6+
justify-content: center;
7+
}
8+
9+
.button-row .mat-button,
10+
.button-row .mat-raised-button,
11+
.button-row .mat-icon-button,
12+
.button-row .mat-fab,
13+
.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="button-row">
3+
<button mat-button>Basic</button>
4+
<button mat-button color="primary">Primary</button>
5+
<button mat-button color="accent">Accent</button>
6+
<button mat-button color="warn">Warn</button>
7+
<button mat-button disabled>Disabled</button>
8+
<a mat-button routerLink=".">Link</a>
9+
</div>
10+
11+
<h3>Raised Buttons</h3>
12+
<div class="button-row">
13+
<button mat-raised-button>Basic</button>
14+
<button mat-raised-button color="primary">Primary</button>
15+
<button mat-raised-button color="accent">Accent</button>
16+
<button mat-raised-button color="warn">Warn</button>
17+
<button mat-raised-button disabled>Disabled</button>
18+
<a mat-raised-button routerLink=".">Link</a>
19+
</div>
20+
21+
<h3>Icon Buttons</h3>
22+
<div class="button-row">
23+
<button mat-icon-button>
24+
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
25+
</button>
26+
<button mat-icon-button color="primary">
27+
<mat-icon aria-label="Example icon-button with a more vertical icon">more_vert</mat-icon>
28+
</button>
29+
<button mat-icon-button color="accent">
30+
<mat-icon aria-label="Example icon-button with a launch icon">launch</mat-icon>
31+
</button>
32+
<button mat-icon-button color="warn">
33+
<mat-icon aria-label="Example icon-button with a menu icon">menu</mat-icon>
34+
</button>
35+
<button mat-icon-button disabled>
36+
<mat-icon aria-label="Example icon-button with a close icon">close</mat-icon>
37+
</button>
38+
</div>
39+
40+
<h3>Fab Buttons</h3>
41+
<div class="button-row">
42+
<button mat-fab>
43+
<mat-icon aria-label="Example icon-button with a people icon">add</mat-icon>
44+
</button>
45+
<button mat-fab color="primary">
46+
<mat-icon aria-label="Example icon-button with a people icon">people</mat-icon>
47+
</button>
48+
<button mat-fab color="warn">
49+
<mat-icon aria-label="Example icon-button with a star icon">star</mat-icon>
50+
</button>
51+
<button mat-fab disabled>
52+
<mat-icon aria-label="Example icon-button with a comment icon">comment</mat-icon>
53+
</button>
54+
<button mat-fab>
55+
<mat-icon aria-label="Example icon-button with a cake icon">cake</mat-icon>
56+
</button>
57+
</div>
58+
59+
<h3>Mini Fab Buttons</h3>
60+
<div class="button-row">
61+
<button mat-mini-fab>
62+
<mat-icon aria-label="Example icon-button with a people icon">add</mat-icon>
63+
</button>
64+
<button mat-mini-fab color="primary">
65+
<mat-icon aria-label="Example icon-button with a people icon">people</mat-icon>
66+
</button>
67+
<button mat-mini-fab color="warn">
68+
<mat-icon aria-label="Example icon-button with a star icon">star</mat-icon>
69+
</button>
70+
<button mat-mini-fab disabled>
71+
<mat-icon aria-label="Example icon-button with a comment icon">comment</mat-icon>
72+
</button>
73+
<button mat-mini-fab>
74+
<mat-icon aria-label="Example icon-button with a cake 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+
.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>
3+
<mat-icon aria-label="Example icon-button with a menu icon">menu</mat-icon>
4+
</button>
5+
<span>Toolbar with icon buttons</span>
6+
<span class="spacer"></span>
7+
<button mat-icon-button>
8+
<mat-icon aria-label="Example icon-button with a more vertical 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.

‎src/material-examples/example-module.ts

+13-5
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ import {AutocompleteDisplayExample} from './autocomplete-display/autocomplete-di
1717
import {AutocompleteFilterExample} from './autocomplete-filter/autocomplete-filter-example';
1818
import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
1919
import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simple-example';
20+
import {ButtonCardExample} from './button-card/button-card-example';
2021
import {ButtonOverviewExample} from './button-overview/button-overview-example';
2122
import {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example';
2223
import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
23-
import {ButtonTypesExample} from './button-types/button-types-example';
24+
import {ButtonToolbarExample} from './button-toolbar/button-toolbar-example';
2425
import {CardFancyExample} from './card-fancy/card-fancy-example';
2526
import {CardOverviewExample} from './card-overview/card-overview-example';
2627
import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example';
@@ -145,6 +146,12 @@ export const EXAMPLE_COMPONENTS = {
145146
additionalFiles: null,
146147
selectorName: null
147148
},
149+
'button-card': {
150+
title: 'Button usage in cards',
151+
component: ButtonCardExample,
152+
additionalFiles: null,
153+
selectorName: null
154+
},
148155
'button-overview': {
149156
title: 'Basic buttons',
150157
component: ButtonOverviewExample,
@@ -163,9 +170,9 @@ export const EXAMPLE_COMPONENTS = {
163170
additionalFiles: null,
164171
selectorName: null
165172
},
166-
'button-types': {
167-
title: 'Button varieties',
168-
component: ButtonTypesExample,
173+
'button-toolbar': {
174+
title: 'Icon button usage in toolbar',
175+
component: ButtonToolbarExample,
169176
additionalFiles: null,
170177
selectorName: null
171178
},
@@ -764,10 +771,11 @@ export const EXAMPLE_LIST = [
764771
AutocompleteFilterExample,
765772
AutocompleteOverviewExample,
766773
AutocompleteSimpleExample,
774+
ButtonCardExample,
767775
ButtonOverviewExample,
768776
ButtonToggleExclusiveExample,
769777
ButtonToggleOverviewExample,
770-
ButtonTypesExample,
778+
ButtonToolbarExample,
771779
CardFancyExample,
772780
CardOverviewExample,
773781
CdkTableBasicExample,

0 commit comments

Comments
 (0)