Skip to content

Commit 1f2b15b

Browse files
author
Nils Heinemann
committed
feat(button): implement speed dial fab
mark fab speed dial in progress implement speed dial add demo app resolves angular#860
1 parent 994d3ab commit 1f2b15b

File tree

11 files changed

+754
-441
lines changed

11 files changed

+754
-441
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ High level stuff planned for Q4 2018 (October - Dec):
8585

8686
| Feature | Status | Docs | Issue |
8787
|------------------|-------------------------------------|--------------|----------------|
88-
| fab speed-dial | Not started, not planned | - | [#860][0860] |
88+
| fab speed-dial | PR in progress | - | [#860][0860] |
8989
| fab toolbar | Not started, not planned | - | - |
9090
| bottom-nav | Not started, not planned | - | [#408][0408] |
9191

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

+15-1
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,28 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10-
import {MatButtonModule, MatIconModule} from '@angular/material';
10+
import {FormsModule} from '@angular/forms';
11+
import {
12+
MatButtonModule,
13+
MatFormFieldModule,
14+
MatIconModule,
15+
MatInputModule,
16+
MatSelectModule,
17+
MatSlideToggleModule
18+
} from '@angular/material';
1119
import {RouterModule} from '@angular/router';
20+
1221
import {ButtonDemo} from './button-demo';
1322

1423
@NgModule({
1524
imports: [
1625
MatButtonModule,
1726
MatIconModule,
27+
MatFormFieldModule,
28+
MatInputModule,
29+
MatSelectModule,
30+
FormsModule,
31+
MatSlideToggleModule,
1832
RouterModule.forChild([{path: '', component: ButtonDemo}]),
1933
],
2034
declarations: [ButtonDemo],

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

+198-113
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,200 @@
11
<div class="demo-button">
2-
<h4 class="demo-section-header">Buttons</h4>
3-
<section>
4-
<button mat-button>normal</button>
5-
<button mat-raised-button>raised</button>
6-
<button mat-stroked-button>stroked</button>
7-
<button mat-flat-button>flat</button>
8-
<button mat-fab><mat-icon>check</mat-icon></button>
9-
<button mat-mini-fab><mat-icon>check</mat-icon></button>
10-
</section>
11-
12-
<h4 class="demo-section-header">Anchors</h4>
13-
<section>
14-
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
15-
<a href="//www.google.com" mat-raised-button>SEARCH</a>
16-
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
17-
<a href="//www.google.com" mat-flat-button>SEARCH</a>
18-
<a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
19-
<a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
20-
</section>
21-
22-
<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
23-
<section>
24-
<button mat-button color="primary">primary</button>
25-
<button mat-button color="accent">accent</button>
26-
<button mat-button color="warn">warn</button>
27-
<button mat-button disabled>disabled</button>
28-
</section>
29-
30-
<h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
31-
<section>
32-
<button mat-raised-button color="primary">primary</button>
33-
<button mat-raised-button color="accent">accent</button>
34-
<button mat-raised-button color="warn">warn</button>
35-
<button mat-raised-button disabled>disabled</button>
36-
</section>
37-
38-
<h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
39-
<section>
40-
<button mat-stroked-button color="primary">primary</button>
41-
<button mat-stroked-button color="accent">accent</button>
42-
<button mat-stroked-button color="warn">warn</button>
43-
<button mat-stroked-button disabled>disabled</button>
44-
</section>
45-
46-
<h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
47-
<section>
48-
<button mat-flat-button color="primary">primary</button>
49-
<button mat-flat-button color="accent">accent</button>
50-
<button mat-flat-button color="warn">warn</button>
51-
<button mat-flat-button disabled>disabled</button>
52-
</section>
53-
54-
<h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
55-
<section>
56-
<button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
57-
<button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
58-
<button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
59-
<button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
60-
</section>
61-
62-
<h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
63-
<section>
64-
<button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
65-
<button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
66-
<button mat-fab color="warn"><mat-icon>home</mat-icon></button>
67-
<button mat-fab disabled><mat-icon>favorite</mat-icon></button>
68-
</section>
69-
70-
<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
71-
<section>
72-
<button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
73-
<button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
74-
<button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
75-
<button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
76-
</section>
77-
78-
<h4 class="demo-section-header">Interaction/State</h4>
79-
<section class="demo-no-flex">
80-
<div>
81-
<p>isDisabled: {{isDisabled}}</p>
82-
<p>Button 1 as been clicked {{clickCounter}} times</p>
83-
<button mat-flat-button (click)="isDisabled=!isDisabled">
84-
{{isDisabled ? 'Enable All' : 'Disable All'}}
85-
</button>
86-
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
87-
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
88-
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
89-
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
90-
</div>
91-
<div>
92-
<button mat-button #button1 [disabled]="isDisabled"
93-
(click)="clickCounter=clickCounter+1">
94-
Button 1
95-
</button>
96-
<button mat-button #button2 color="primary" [disabled]="isDisabled">
97-
Button 2
98-
</button>
99-
<a href="//www.google.com" #button3 mat-button color="accent"
100-
[disabled]="isDisabled">
101-
Button 3
102-
</a>
103-
<button mat-raised-button #button4 color="primary"
104-
[disabled]="isDisabled">
105-
Button 4
106-
</button>
107-
<button mat-mini-fab [disabled]="isDisabled">
108-
<mat-icon>check</mat-icon>
109-
</button>
110-
<button mat-icon-button color="accent" [disabled]="isDisabled">
111-
<mat-icon>favorite</mat-icon>
112-
</button>
113-
</div>
114-
</section>
2+
<h4 class="demo-section-header">Buttons</h4>
3+
<section>
4+
<button mat-button>normal</button>
5+
<button mat-raised-button>raised</button>
6+
<button mat-stroked-button>stroked</button>
7+
<button mat-flat-button>flat</button>
8+
<button mat-fab>
9+
<mat-icon>check</mat-icon>
10+
</button>
11+
<button mat-mini-fab>
12+
<mat-icon>check</mat-icon>
13+
</button>
14+
</section>
15+
16+
<h4 class="demo-section-header">Anchors</h4>
17+
<section>
18+
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
19+
<a href="//www.google.com" mat-raised-button>SEARCH</a>
20+
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
21+
<a href="//www.google.com" mat-flat-button>SEARCH</a>
22+
<a href="//www.google.com" mat-fab>
23+
<mat-icon>check</mat-icon>
24+
</a>
25+
<a href="//www.google.com" mat-mini-fab>
26+
<mat-icon>check</mat-icon>
27+
</a>
28+
</section>
29+
30+
<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
31+
<section>
32+
<button mat-button color="primary">primary</button>
33+
<button mat-button color="accent">accent</button>
34+
<button mat-button color="warn">warn</button>
35+
<button mat-button disabled>disabled</button>
36+
</section>
37+
38+
<h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
39+
<section>
40+
<button mat-raised-button color="primary">primary</button>
41+
<button mat-raised-button color="accent">accent</button>
42+
<button mat-raised-button color="warn">warn</button>
43+
<button mat-raised-button disabled>disabled</button>
44+
</section>
45+
46+
<h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
47+
<section>
48+
<button mat-stroked-button color="primary">primary</button>
49+
<button mat-stroked-button color="accent">accent</button>
50+
<button mat-stroked-button color="warn">warn</button>
51+
<button mat-stroked-button disabled>disabled</button>
52+
</section>
53+
54+
<h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
55+
<section>
56+
<button mat-flat-button color="primary">primary</button>
57+
<button mat-flat-button color="accent">accent</button>
58+
<button mat-flat-button color="warn">warn</button>
59+
<button mat-flat-button disabled>disabled</button>
60+
</section>
61+
62+
<h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
63+
<section>
64+
<button mat-icon-button color="primary">
65+
<mat-icon>cached</mat-icon>
66+
</button>
67+
<button mat-icon-button color="accent">
68+
<mat-icon>backup</mat-icon>
69+
</button>
70+
<button mat-icon-button color="warn">
71+
<mat-icon>trending_up</mat-icon>
72+
</button>
73+
<button mat-icon-button disabled>
74+
<mat-icon>visibility</mat-icon>
75+
</button>
76+
</section>
77+
78+
<h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
79+
<section>
80+
<button mat-fab color="primary">
81+
<mat-icon>delete</mat-icon>
82+
</button>
83+
<button mat-fab color="accent">
84+
<mat-icon>bookmark</mat-icon>
85+
</button>
86+
<button mat-fab color="warn">
87+
<mat-icon>home</mat-icon>
88+
</button>
89+
<button mat-fab disabled>
90+
<mat-icon>favorite</mat-icon>
91+
</button>
92+
</section>
93+
94+
<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
95+
<section>
96+
<button mat-mini-fab color="primary">
97+
<mat-icon>menu</mat-icon>
98+
</button>
99+
<button mat-mini-fab color="accent">
100+
<mat-icon>plus_one</mat-icon>
101+
</button>
102+
<button mat-mini-fab color="warn">
103+
<mat-icon>filter_list</mat-icon>
104+
</button>
105+
<button mat-mini-fab disabled>
106+
<mat-icon>home</mat-icon>
107+
</button>
108+
</section>
109+
110+
<h4 class="demo-section-header">Interaction/State</h4>
111+
<section class="demo-no-flex">
112+
<div>
113+
<p>isDisabled: {{isDisabled}}</p>
114+
<p>Button 1 as been clicked {{clickCounter}} times</p>
115+
<button mat-flat-button (click)="isDisabled=!isDisabled">
116+
{{isDisabled ? 'Enable All' : 'Disable All'}}
117+
</button>
118+
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
119+
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
120+
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
121+
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
122+
</div>
123+
<div>
124+
<button mat-button #button1 [disabled]="isDisabled"
125+
(click)="clickCounter=clickCounter+1">
126+
Button 1
127+
</button>
128+
<button mat-button #button2 color="primary" [disabled]="isDisabled">
129+
Button 2
130+
</button>
131+
<a href="//www.google.com" #button3 mat-button color="accent"
132+
[disabled]="isDisabled">
133+
Button 3
134+
</a>
135+
<button mat-raised-button #button4 color="primary"
136+
[disabled]="isDisabled">
137+
Button 4
138+
</button>
139+
<button mat-mini-fab [disabled]="isDisabled">
140+
<mat-icon>check</mat-icon>
141+
</button>
142+
<button mat-icon-button color="accent" [disabled]="isDisabled">
143+
<mat-icon>favorite</mat-icon>
144+
</button>
145+
</div>
146+
</section>
147+
148+
<h4 class="demo-section-header"> Speed dial Fab Button [mat-fab-dial]</h4>
149+
<section class="demo-section-fab-dial">
150+
<section class="demo-fab-dial-control">
151+
<form>
152+
<mat-form-field>
153+
<mat-label>Colors</mat-label>
154+
<select matNativeControl name="colors" [(ngModel)]="colorFab">
155+
<option value="primary" selected>Primary</option>
156+
<option value="accent">Accent</option>
157+
<option value="warn">Warning</option>
158+
</select>
159+
</mat-form-field>
160+
161+
162+
<mat-slide-toggle [(ngModel)]="disableFab" name="disable">
163+
Disabled
164+
</mat-slide-toggle>
165+
<!-- direction -->
166+
<mat-form-field>
167+
<mat-label>direction</mat-label>
168+
<select matNativeControl name="direction" [(ngModel)]="directionFab">
169+
<option value="vertical" selected>Vertical</option>
170+
<option value="horizontal">Horizontal</option>
171+
</select>
172+
</mat-form-field>
173+
<!-- placement -->
174+
<mat-form-field>
175+
<mat-label>Placement</mat-label>
176+
<select matNativeControl name="placement" [(ngModel)]="placementFab">
177+
<option value="top" selected>Top</option>
178+
<option value="bottom">Bottom</option>
179+
</select>
180+
</mat-form-field>
181+
182+
</form>
183+
184+
</section>
185+
186+
<mat-fab-dial [color]="colorFab" [attr.placement]="placementFab"
187+
[attr.direction]="directionFab" [disabled]="disableFab">
188+
<button mat-mini-fab color="accent">
189+
<mat-icon>plus_one</mat-icon>
190+
</button>
191+
<button mat-mini-fab color="warn">
192+
<mat-icon>filter_list</mat-icon>
193+
</button>
194+
<button mat-mini-fab disabled>
195+
<mat-icon>home</mat-icon>
196+
</button>
197+
</mat-fab-dial>
198+
199+
</section>
115200
</div>

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

+7
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,10 @@
2323
display: block;
2424
}
2525
}
26+
27+
.demo-section-fab-dial {
28+
min-height: 10vh;
29+
mat-form-field {
30+
margin: 0.5rem 1rem;
31+
}
32+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import {Component} from '@angular/core';
10+
import {ThemePalette} from '@angular/material';
1011

1112

1213
@Component({
@@ -19,4 +20,15 @@ export class ButtonDemo {
1920
isDisabled: boolean = false;
2021
clickCounter: number = 0;
2122
toggleDisable: boolean = false;
23+
24+
_colorFab: ThemePalette = 'primary';
25+
get colorFab(): ThemePalette {
26+
return this._colorFab;
27+
}
28+
set colorFab(value: ThemePalette) {
29+
this._colorFab = value;
30+
}
31+
disableFab: boolean = false;
32+
directionFab: 'horizontal'|'vertical' = 'vertical';
33+
placementFab: 'top'|'bottom' = 'bottom';
2234
}

0 commit comments

Comments
 (0)