Skip to content

Commit b0ea290

Browse files
EladBezalelEladBezalel
committed
docs(button): enhance button docs and examples
1 parent 6e865b7 commit b0ea290

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 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.

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

+13-5
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import {AutocompleteSimpleExample} from './autocomplete-simple/autocomplete-simp
2020
import {ButtonOverviewExample} from './button-overview/button-overview-example';
2121
import {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example';
2222
import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
23-
import {ButtonTypesExample} from './button-types/button-types-example';
23+
import {ButtonCardExample} from "./button-card/button-card-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';
@@ -170,9 +171,15 @@ export const EXAMPLE_COMPONENTS = {
170171
additionalFiles: null,
171172
selectorName: null
172173
},
173-
'button-types': {
174-
title: 'Button varieties',
175-
component: ButtonTypesExample,
174+
'button-card': {
175+
title: 'Button usage in cards',
176+
component: ButtonCardExample,
177+
additionalFiles: null,
178+
selectorName: null
179+
},
180+
'button-toolbar': {
181+
title: 'Icon button usage in toolbar',
182+
component: ButtonToolbarExample,
176183
additionalFiles: null,
177184
selectorName: null
178185
},
@@ -816,7 +823,8 @@ export const EXAMPLE_LIST = [
816823
ButtonOverviewExample,
817824
ButtonToggleExclusiveExample,
818825
ButtonToggleOverviewExample,
819-
ButtonTypesExample,
826+
ButtonCardExample,
827+
ButtonToolbarExample,
820828
CardFancyExample,
821829
CardOverviewExample,
822830
CdkTableBasicExample,

0 commit comments

Comments
 (0)