-
Notifications
You must be signed in to change notification settings - Fork 19
/
app.component.html
106 lines (98 loc) · 4.11 KB
/
app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<mat-toolbar color="accent">
<mat-toolbar-row>
<span>FAB Speed Dial</span>
<span class="example-spacer"></span>
<a mat-button href="https://github.com/ecodev/fab-speed-dial"
><img src="assets/github-circle-transparent.svg" class="github-logo" /> GitHub</a
>
</mat-toolbar-row>
</mat-toolbar>
<mat-card class="fab-demo-actions">
<mat-card-header>
<mat-card-title>Options</mat-card-title>
</mat-card-header>
<mat-card-content class="mat-body-1">
<p>
Direction:
<mat-radio-group [(ngModel)]="direction" name="direction">
<mat-radio-button value="up">Up</mat-radio-button>
<mat-radio-button value="down">Down</mat-radio-button>
<mat-radio-button value="left">Left</mat-radio-button>
<mat-radio-button value="right">Right</mat-radio-button>
</mat-radio-group>
</p>
<p>
Animation Mode:
<mat-radio-group [(ngModel)]="animationMode" name="animationMode">
<mat-radio-button value="fling">fling</mat-radio-button>
<mat-radio-button value="scale">scale</mat-radio-button>
</mat-radio-group>
</p>
<p>
<mat-slide-toggle [(ngModel)]="fixed">Fixed</mat-slide-toggle>
</p>
<p>
<mat-slide-toggle [(ngModel)]="spin">Enable Spinning</mat-slide-toggle>
</p>
</mat-card-content>
</mat-card>
<div class="container-fab-demo">
<mat-card>
<mat-card-header>
<mat-card-title>Click me</mat-card-title>
</mat-card-header>
<mat-card-content class="mat-body-1">
<mat-slide-toggle [(ngModel)]="open" (click)="stopPropagation($event)">Open</mat-slide-toggle>
<eco-fab-speed-dial [(open)]="open" [direction]="direction" [animationMode]="animationMode" [fixed]="fixed">
<eco-fab-speed-dial-trigger [spin]="spin">
<button mat-fab (click)="doAction('trigger')">
<mat-icon class="spin180" fontIcon="add" />
</button>
</eco-fab-speed-dial-trigger>
<eco-fab-speed-dial-actions>
<button mat-mini-fab (click)="doAction('action1')">
<mat-icon fontIcon="search" />
</button>
<button mat-mini-fab (click)="doAction('action2')">
<mat-icon fontIcon="edit" />
</button>
<button mat-mini-fab (click)="doAction('action3')">
<mat-icon fontIcon="home" />
</button>
</eco-fab-speed-dial-actions>
</eco-fab-speed-dial>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-title>Hover me</mat-card-title>
</mat-card-header>
<mat-card-content class="mat-body-1">
<eco-fab-speed-dial
#myFab
[direction]="direction"
[animationMode]="animationMode"
[fixed]="fixed"
(mouseenter)="myFab.open = true"
(mouseleave)="myFab.open = false"
>
<eco-fab-speed-dial-trigger [spin]="spin">
<button mat-fab (click)="doAction('trigger')">
<mat-icon class="spin360" fontIcon="check" />
</button>
</eco-fab-speed-dial-trigger>
<eco-fab-speed-dial-actions>
<button mat-mini-fab (click)="doAction('action1')">
<mat-icon fontIcon="add" />
</button>
<button mat-mini-fab (click)="doAction('action2')">
<mat-icon fontIcon="edit" />
</button>
<button mat-mini-fab (click)="doAction('action3')">
<mat-icon fontIcon="menu" />
</button>
</eco-fab-speed-dial-actions>
</eco-fab-speed-dial>
</mat-card-content>
</mat-card>
</div>