Skip to content

Commit 4193930

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

15 files changed

+170
-217
lines changed

‎src/demo-app/button/button-demo.html

Lines changed: 9 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,9 @@
1-
<div class="demo-button">
2-
<section>
3-
<button mat-button>flat</button>
4-
<button mat-raised-button>raised</button>
5-
<button mat-fab>
6-
<mat-icon>check</mat-icon>
7-
</button>
8-
<button mat-fab>Btn</button>
9-
<a mat-fab routerLink=".">Link</a>
10-
<a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
11-
<button mat-mini-fab>
12-
<mat-icon>check</mat-icon>
13-
</button>
14-
<button mat-mini-fab>Btn</button>
15-
<a mat-mini-fab routerLink=".">Link</a>
16-
</section>
17-
18-
<section>
19-
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
20-
<a href="http://www.google.com" mat-raised-button>SEARCH</a>
21-
<a href="http://www.google.com" mat-fab>
22-
<mat-icon>check</mat-icon>
23-
</a>
24-
<a href="http://www.google.com" mat-mini-fab>
25-
<mat-icon>check</mat-icon>
26-
</a>
27-
</section>
28-
29-
<section>
30-
<button mat-button color="primary">primary</button>
31-
<button mat-button color="accent">accent</button>
32-
<button mat-button color="warn">warn</button>
33-
</section>
34-
35-
<section>
36-
<button mat-raised-button color="primary">primary</button>
37-
<button mat-raised-button color="accent">accent</button>
38-
<button mat-raised-button color="warn">warn</button>
39-
</section>
40-
41-
<section>
42-
<button mat-fab color="primary">
43-
<mat-icon>home</mat-icon>
44-
</button>
45-
<button mat-fab color="accent">
46-
<mat-icon>favorite</mat-icon>
47-
</button>
48-
<button mat-fab color="warn">
49-
<mat-icon>feedback</mat-icon>
50-
</button>
51-
</section>
52-
53-
<section>
54-
<button mat-icon-button color="primary">
55-
<mat-icon>menu</mat-icon>
56-
</button>
57-
58-
<button mat-icon-button color="accent">
59-
<mat-icon>favorite</mat-icon>
60-
</button>
61-
62-
<button mat-icon-button>
63-
<mat-icon>more_vert</mat-icon>
64-
</button>
65-
</section>
66-
67-
<section>
68-
<div>
69-
<p>isDisabled: {{isDisabled}}, clickCounter: <span>{{clickCounter}}</span></p>
70-
<button mat-raised-button (click)="isDisabled=!isDisabled">
71-
Disable buttons
72-
</button>
73-
<button mat-raised-button (click)="button1.focus()">Focus 1</button>
74-
<button mat-raised-button (click)="button2.focus()">Focus 2</button>
75-
<button mat-raised-button (click)="button3.focus()">Focus 3</button>
76-
<button mat-raised-button (click)="button4.focus()">Focus 4</button>
77-
</div>
78-
<button mat-button #button1 [disabled]="isDisabled" (click)="clickCounter=clickCounter+1">off</button>
79-
<button mat-button #button2 color="primary" [disabled]="isDisabled">off</button>
80-
<a href="http://www.google.com" #button3 mat-button color="accent" [disabled]="isDisabled">off</a>
81-
<button mat-raised-button #button4 color="primary" [disabled]="isDisabled">off</button>
82-
<button mat-mini-fab [disabled]="isDisabled">
83-
<mat-icon>check</mat-icon>
84-
</button>
85-
86-
<button mat-icon-button color="accent" [disabled]="isDisabled">
87-
<mat-icon>favorite</mat-icon>
88-
</button>
89-
</section>
90-
<section>
91-
<a href="http://www.google.com" mat-button color="primary">SEARCH</a>
92-
<button mat-button>DANCE</button>
93-
</section>
94-
<section>
95-
<a href="http://www.google.com" mat-raised-button color="primary">SEARCH</a>
96-
<button mat-raised-button>DANCE</button>
97-
</section>
98-
<section>
99-
<button mat-raised-button>More<mat-icon>more_vert</mat-icon></button>
100-
<button mat-raised-button>Check<mat-icon>check</mat-icon></button>
101-
<button mat-raised-button>Check<mat-icon>favorite</mat-icon></button>
102-
<button mat-raised-button>Last<mat-icon>navigate_before</mat-icon></button>
103-
</section>
104-
<section>
105-
<button mat-button>More<mat-icon>more_vert</mat-icon></button>
106-
<button mat-button>Check<mat-icon>check</mat-icon></button>
107-
<button mat-button>Check<mat-icon>favorite</mat-icon></button>
108-
<button mat-button>Last<mat-icon>navigate_before</mat-icon></button>
109-
</section>
110-
<section>
111-
<button mat-raised-button [disabled]="toggleDisable" (click)="toggleDisable = true">Disable</button>
112-
<button mat-button [disabled]="!toggleDisable" (click)="toggleDisable = false">Disable</button>
113-
</section>
114-
</div>
1+
<mat-card>
2+
<mat-card-header>
3+
<mat-card-title>Buttons usage in cards example</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/demo-app/button/button-demo.scss

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
2-
.demo-button {
3-
button, a {
4-
margin: 8px;
1+
.button-row {
2+
background: #f3f3f3;
3+
padding: 16px;
4+
border-radius: 3px;
5+
display: flex;
6+
justify-content: center;
7+
8+
.mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
59
text-transform: uppercase;
10+
margin: 0 8px;
611
}
7-
8-
section {
9-
display: flex;
10-
align-items: center;
11-
margin: 8px;
12-
}
13-
14-
p {
15-
padding: 5px 15px;
16-
}
17-
}
18-
12+
}

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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 9 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 16 additions & 1 deletion
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

Lines changed: 76 additions & 1 deletion
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 10 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 0 additions & 64 deletions
This file was deleted.

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

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)