Skip to content

Commit bf8c5f4

Browse files
marcosmouramarcosmoura
committed
feat(MdSpeedDial): add centered fab and speed dial
1 parent 492ff05 commit bf8c5f4

File tree

6 files changed

+85
-41
lines changed

6 files changed

+85
-41
lines changed

‎docs/app/pages/Components/SpeedDial/examples/AnimationTypes.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,17 @@
3636

3737
Opacity effect:
3838
<md-speed-dial md-effect="opacity" md-direction="bottom">
39-
<md-speed-dial-target class="md-primary">
40-
<md-icon>my_location</md-icon>
39+
<md-speed-dial-target class="md-plain">
40+
<md-icon>edit</md-icon>
4141
</md-speed-dial-target>
4242

4343
<md-speed-dial-content>
4444
<md-button class="md-icon-button">
45-
<md-icon>directions</md-icon>
45+
<md-icon>attachment</md-icon>
4646
</md-button>
4747

4848
<md-button class="md-icon-button">
49-
<md-icon>streetview</md-icon>
49+
<md-icon>archive</md-icon>
5050
</md-button>
5151
</md-speed-dial-content>
5252
</md-speed-dial>

‎docs/app/pages/Components/SpeedDial/examples/EventTriggers.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="example">
33
Hover as trigger:
44
<md-speed-dial md-direction="bottom">
5-
<md-speed-dial-target>
5+
<md-speed-dial-target @click="customClick">
66
<md-icon>add</md-icon>
77
</md-speed-dial-target>
88

@@ -38,7 +38,12 @@
3838

3939
<script>
4040
export default {
41-
name: 'EventTriggers'
41+
name: 'EventTriggers',
42+
methods: {
43+
customClick () {
44+
window.alert('You can have a custom click inside the target!')
45+
}
46+
}
4247
}
4348
</script>
4449

‎docs/app/pages/Components/SpeedDial/examples/PositionDirection.vue

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
11
<template>
22
<div class="example">
3-
<md-speed-dial class="md-bottom-left">
4-
<md-speed-dial-target>
5-
<md-icon>add</md-icon>
6-
</md-speed-dial-target>
7-
8-
<md-speed-dial-content>
9-
<md-button class="md-icon-button">
10-
<md-icon>note</md-icon>
11-
</md-button>
12-
13-
<md-button class="md-icon-button">
14-
<md-icon>event</md-icon>
15-
</md-button>
16-
</md-speed-dial-content>
17-
</md-speed-dial>
18-
19-
<md-speed-dial class="md-bottom-right">
3+
<md-speed-dial :class="topPosition" md-direction="bottom">
204
<md-speed-dial-target class="md-primary">
215
<md-icon>my_location</md-icon>
226
</md-speed-dial-target>
@@ -32,7 +16,7 @@
3216
</md-speed-dial-content>
3317
</md-speed-dial>
3418

35-
<md-speed-dial md-direction="bottom" class="md-top-left">
19+
<md-speed-dial :class="bottomPosition">
3620
<md-speed-dial-target>
3721
<md-icon>add</md-icon>
3822
</md-speed-dial-target>
@@ -48,32 +32,54 @@
4832
</md-speed-dial-content>
4933
</md-speed-dial>
5034

51-
<md-speed-dial md-direction="bottom" class="md-top-right">
52-
<md-speed-dial-target class="md-primary">
53-
<md-icon>my_location</md-icon>
54-
</md-speed-dial-target>
55-
56-
<md-speed-dial-content>
57-
<md-button class="md-icon-button">
58-
<md-icon>directions</md-icon>
59-
</md-button>
35+
<div class="demo-option">
36+
<div>
37+
<label for="top">Top</label>
38+
<select id="top" v-model="topPosition">
39+
<option value="md-top-left">Left</option>
40+
<option value="md-top-center">Center</option>
41+
<option value="md-top-right">Right</option>
42+
</select>
43+
</div>
6044

61-
<md-button class="md-icon-button">
62-
<md-icon>streetview</md-icon>
63-
</md-button>
64-
</md-speed-dial-content>
65-
</md-speed-dial>
45+
<div>
46+
<label for="bottom">Bottom</label>
47+
<select id="bottom" v-model="bottomPosition">
48+
<option value="md-bottom-left">Left</option>
49+
<option value="md-bottom-center">Center</option>
50+
<option value="md-bottom-right">Right</option>
51+
</select>
52+
</div>
53+
</div>
6654
</div>
6755
</template>
6856

6957
<script>
7058
export default {
71-
name: 'PositionDirection'
59+
name: 'PositionDirection',
60+
data: () => ({
61+
topPosition: 'md-top-left',
62+
bottomPosition: 'md-bottom-left'
63+
})
7264
}
7365
</script>
7466

7567
<style lang="scss" scoped>
7668
.example {
7769
min-height: 300px;
7870
}
71+
72+
.demo-option {
73+
display: flex;
74+
position: absolute;
75+
top: 50%;
76+
left: 50%;
77+
transform: translate(-50%, -50%);
78+
79+
div {
80+
margin: 0 6px;
81+
display: flex;
82+
flex-direction: column;
83+
}
84+
}
7985
</style>

‎src/components/MdButton/MdButton.vue

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,6 @@ export default new MdComponent({
254254
255255
width: $md-button-fab-size;
256256
height: $md-button-fab-size;
257-
padding: 0;
258257
min-width: 0;
259258
overflow: hidden;
260259
@@ -293,6 +292,21 @@ export default new MdComponent({
293292
bottom: 24px;
294293
}
295294
295+
&.md-fab-top-center,
296+
&.md-fab-bottom-center {
297+
position: absolute;
298+
left: 50%;
299+
transform: translateX(-50%);
300+
}
301+
302+
&.md-fab-top-center {
303+
top: 24px;
304+
}
305+
306+
&.md-fab-bottom-center {
307+
top: 24px;
308+
}
309+
296310
&.md-fab-top-right,
297311
&.md-fab-bottom-right {
298312
right: 24px;
@@ -306,5 +320,9 @@ export default new MdComponent({
306320
&.md-fixed {
307321
position: fixed;
308322
}
323+
324+
.md-ripple {
325+
padding: 0;
326+
}
309327
}
310328
</style>

‎src/components/MdSpeedDial/MdSpeedDial.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,21 @@ export default new MdComponent({
8282
bottom: 24px;
8383
}
8484
85+
&.md-top-center,
86+
&.md-bottom-center {
87+
position: absolute;
88+
left: 50%;
89+
transform: translateX(-50%);
90+
}
91+
92+
&.md-top-center {
93+
top: 24px;
94+
}
95+
96+
&.md-bottom-center {
97+
bottom: 24px;
98+
}
99+
85100
&.md-top-right,
86101
&.md-bottom-right {
87102
right: 24px;

‎src/components/MdSpeedDial/MdSpeedDialTarget.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<md-button class="md-speed-dial-target md-fab" @click="handleClick">
2+
<md-button class="md-speed-dial-target md-fab" v-on="$listeners" v-bind="$attrs" @click="handleClick">
33
<slot />
44
</md-button>
55
</template>

0 commit comments

Comments
 (0)