Skip to content

Commit 93f6b30

Browse files
livvielinlivvielin
authored
docs(button): add more comprehensive button examples (#18878)
1 parent a0695ca commit 93f6b30

File tree

7 files changed

+169
-2
lines changed

7 files changed

+169
-2
lines changed

‎src/components-examples/material/button/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ ng_module(
1212
module_name = "@angular/components-examples/material/button",
1313
deps = [
1414
"//src/material/button",
15+
"//src/material/divider",
1516
"//src/material/icon",
1617
],
1718
)

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
/** No CSS for this example */
1+
section {
2+
display: table;
3+
margin: 8px;
4+
}
5+
6+
.example-label {
7+
display: table-cell;
8+
font-size: 14px;
9+
margin-left: 8px;
10+
width: 120px;
11+
}
12+
13+
.example-button-row {
14+
display: table-cell;
15+
}
16+
17+
.example-button-row button {
18+
display: table-cell;
19+
margin-right: 8px;
20+
}
21+
22+
.example-flex-container {
23+
display: flex;
24+
justify-content: space-between;
25+
width: 480px;
26+
}
27+
28+
.example-button-container {
29+
display: flex;
30+
justify-content: center;
31+
width: 120px;
32+
}

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

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,126 @@
1-
<button mat-button>Click me!</button>
1+
<section>
2+
<div class="example-label">Basic</div>
3+
<div class="example-button-row">
4+
<button mat-button>Basic</button>
5+
<button mat-button color="primary">Primary</button>
6+
<button mat-button color="accent">Accent</button>
7+
<button mat-button color="warn">Warn</button>
8+
<button mat-button disabled>Disabled</button>
9+
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
10+
</div>
11+
</section>
12+
<mat-divider></mat-divider>
13+
<section>
14+
<div class="example-label">Raised</div>
15+
<div class="example-button-row">
16+
<button mat-raised-button>Basic</button>
17+
<button mat-raised-button color="primary">Primary</button>
18+
<button mat-raised-button color="accent">Accent</button>
19+
<button mat-raised-button color="warn">Warn</button>
20+
<button mat-raised-button disabled>Disabled</button>
21+
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
22+
</div>
23+
</section>
24+
<mat-divider></mat-divider>
25+
<section>
26+
<div class="example-label">Stroked</div>
27+
<div class="example-button-row">
28+
<button mat-stroked-button>Basic</button>
29+
<button mat-stroked-button color="primary">Primary</button>
30+
<button mat-stroked-button color="accent">Accent</button>
31+
<button mat-stroked-button color="warn">Warn</button>
32+
<button mat-stroked-button disabled>Disabled</button>
33+
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
34+
</div>
35+
</section>
36+
<mat-divider></mat-divider>
37+
<section>
38+
<div class="example-label">Flat</div>
39+
<div class="example-button-row">
40+
<button mat-flat-button>Basic</button>
41+
<button mat-flat-button color="primary">Primary</button>
42+
<button mat-flat-button color="accent">Accent</button>
43+
<button mat-flat-button color="warn">Warn</button>
44+
<button mat-flat-button disabled>Disabled</button>
45+
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
46+
</div>
47+
</section>
48+
<mat-divider></mat-divider>
49+
<section>
50+
<div class="example-label">Icon</div>
51+
<div class="example-button-row">
52+
<div class="example-flex-container">
53+
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
54+
<mat-icon>more_vert</mat-icon>
55+
</button>
56+
<button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
57+
<mat-icon>home</mat-icon>
58+
</button>
59+
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
60+
<mat-icon>menu</mat-icon>
61+
</button>
62+
<button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
63+
<mat-icon>favorite</mat-icon>
64+
</button>
65+
<button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
66+
<mat-icon>open_in_new</mat-icon>
67+
</button>
68+
</div>
69+
</div>
70+
</section>
71+
<mat-divider></mat-divider>
72+
<section>
73+
<div class="example-label">FAB</div>
74+
<div class="example-button-row">
75+
<div class="example-flex-container">
76+
<div class="example-button-container">
77+
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
78+
<mat-icon>delete</mat-icon>
79+
</button>
80+
</div>
81+
<div class="example-button-container">
82+
<button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
83+
<mat-icon>bookmark</mat-icon>
84+
</button>
85+
</div>
86+
<div class="example-button-container">
87+
<button mat-fab color="warn" aria-label="Example icon button with a home icon">
88+
<mat-icon>home</mat-icon>
89+
</button>
90+
</div>
91+
<div class="example-button-container">
92+
<button mat-fab disabled aria-label="Example icon button with a heart icon">
93+
<mat-icon>favorite</mat-icon>
94+
</button>
95+
</div>
96+
</div>
97+
</div>
98+
</section>
99+
<mat-divider></mat-divider>
100+
<section>
101+
<div class="example-label">Mini FAB</div>
102+
<div class="example-button-row">
103+
<div class="example-flex-container">
104+
<div class="example-button-container">
105+
<button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
106+
<mat-icon>menu</mat-icon>
107+
</button>
108+
</div>
109+
<div class="example-button-container">
110+
<button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
111+
<mat-icon>plus_one</mat-icon>
112+
</button>
113+
</div>
114+
<div class="example-button-container">
115+
<button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
116+
<mat-icon>filter_list</mat-icon>
117+
</button>
118+
</div>
119+
<div class="example-button-container">
120+
<button mat-mini-fab disabled aria-label="Example icon button with a home icon">
121+
<mat-icon>home</mat-icon>
122+
</button>
123+
</div>
124+
</div>
125+
</div>
126+
</section>

‎src/components-examples/material/button/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {NgModule} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
3+
import {MatDividerModule} from '@angular/material/divider';
34
import {MatIconModule} from '@angular/material/icon';
45
import {ButtonOverviewExample} from './button-overview/button-overview-example';
56
import {ButtonTypesExample} from './button-types/button-types-example';
@@ -17,6 +18,7 @@ const EXAMPLES = [
1718
@NgModule({
1819
imports: [
1920
MatButtonModule,
21+
MatDividerModule,
2022
MatIconModule,
2123
],
2224
declarations: EXAMPLES,

‎src/dev-app/button/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ ng_module(
1010
":button_demo_scss",
1111
],
1212
deps = [
13+
"//src/components-examples/material/button",
1314
"//src/material/button",
1415
"//src/material/icon",
1516
"@npm//@angular/router",

‎src/dev-app/button/button-demo-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import {MatButtonModule} from '@angular/material/button';
1111
import {MatIconModule} from '@angular/material/icon';
1212
import {RouterModule} from '@angular/router';
1313
import {ButtonDemo} from './button-demo';
14+
import {ButtonExamplesModule} from '@angular/components-examples/material/button';
1415

1516
@NgModule({
1617
imports: [
18+
ButtonExamplesModule,
1719
MatButtonModule,
1820
MatIconModule,
1921
RouterModule.forChild([{path: '', component: ButtonDemo}]),

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,4 +119,9 @@ <h4 class="demo-section-header">Interaction/State</h4>
119119
</button>
120120
</div>
121121
</section>
122+
123+
<h4 class="demo-section-header">Overview</h4>
124+
<section>
125+
<button-overview-example></button-overview-example>
126+
</section>
122127
</div>

0 commit comments

Comments
 (0)