Skip to content

Commit e7b77de

Browse files
hazzohazzo
committed
More features:
- Accepts tooltip for main icon - Accepts tooltip for actions inside fab
1 parent 9993f99 commit e7b77de

File tree

4 files changed

+150
-39
lines changed

4 files changed

+150
-39
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ And
4040
| `ripple-show` | Boolean | <b>Default true</b> <br>Options: true or false. |
4141
| `ripple-color` | String | <b>Default 'light'</b> <br>Options: 'light' or 'dark'. |
4242
| `main-icon` | String | <b>Default 'add'</b> <br>Use icons from the material icon library. |
43-
| `actions` | Object | Has <b>two properties</b>: <br> -`name` (String) Name of the event. <br> -`icon`(String) Icon name. (Please refer to [Material icons](https://material.io/icons/))|
43+
| `main-tooltip` | String | <b>Default `null`</b> |
44+
| `actions` | Object | Has <b>three properties</b>: <br> -`name` (String) Name of the event. <br> -`icon`(String) Icon name. (Please refer to [Material icons](https://material.io/icons/)) <br> -`tooltip` (String) If not used, tooltip won't appear.|
4445

4546

4647
## Examples

‎demo/App.vue‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -71,23 +71,56 @@
7171
</span>
7272
</p>
7373
</div>
74-
<div class="field">
75-
<label class="label is-pulled-left">Main Icon</label>
76-
<p class="control">
77-
<input type="text" class="input" v-model="mainIcon">
78-
</p>
74+
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
75+
Main Icon & Tooltip
76+
</label>
77+
<div class="field is-horizontal">
78+
<div class="field-body">
79+
<div class="field">
80+
<p class="control">
81+
<input type="text" class="input" v-model="mainIcon">
82+
</p>
83+
</div>
84+
<div class="field">
85+
<p class="control">
86+
<input type="text" class="input" v-model="mainTooltip">
87+
</p>
88+
</div>
89+
</div>
7990
</div>
80-
<div class="field">
81-
<label class="label is-pulled-left">First Icon</label>
82-
<p class="control">
83-
<input type="text" class="input" v-model="firstIcon">
84-
</p>
91+
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
92+
First Icon & Tooltip
93+
</label>
94+
<div class="field is-horizontal">
95+
<div class="field-body">
96+
<div class="field">
97+
<p class="control">
98+
<input type="text" class="input" v-model="firstIcon">
99+
</p>
100+
</div>
101+
<div class="field">
102+
<p class="control">
103+
<input type="text" class="input" v-model="firstTooltip">
104+
</p>
105+
</div>
106+
</div>
85107
</div>
86-
<div class="field">
87-
<label class="label is-pulled-left">Second Icon</label>
88-
<p class="control">
89-
<input type="text" class="input" v-model="secondIcon">
90-
</p>
108+
<label class="label" style="display: flex; align-items: center; padding-right: 1rem;">
109+
Second Icon & Tooltip
110+
</label>
111+
<div class="field is-horizontal">
112+
<div class="field-body">
113+
<div class="field">
114+
<p class="control">
115+
<input type="text" class="input" v-model="secondIcon">
116+
</p>
117+
</div>
118+
<div class="field">
119+
<p class="control">
120+
<input type="text" class="input" v-model="secondTooltip">
121+
</p>
122+
</div>
123+
</div>
91124
</div>
92125
</div>
93126
</div>
@@ -121,7 +154,8 @@
121154
:position="position"
122155
:bg-color="colors.hex"
123156
:main-icon="mainIcon"
124-
:actions="[{name: 'alertMe',icon: firstIcon},{name: 'alertMe',icon: secondIcon}]"
157+
:main-tooltip="mainTooltip"
158+
:actions="[{name: 'alertMe',icon: firstIcon, tooltip: firstTooltip},{name: 'alertMe',icon: secondIcon, tooltip: secondTooltip}]"
125159
@alertMe="alert"
126160
></fab>
127161
</div>
@@ -176,8 +210,11 @@
176210
position: 'bottom-right',
177211
colors: defaultProps,
178212
mainIcon: 'add',
213+
mainTooltip: 'Hello',
179214
firstIcon: 'cached',
180-
secondIcon: 'add_alert'
215+
firstTooltip: 'cached',
216+
secondIcon: 'add_alert',
217+
secondTooltip: 'add_alert'
181218
}
182219
},
183220
methods: {

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
3434
},
3535
"dependencies": {
36+
"v-tooltip": "^2.0.0-beta.4",
3637
"vue": "^2.2.1",
3738
"vue-clickaway": "^2.1.0",
3839
"vue-ripple-directive": "^1.0.0"

‎src/FAB.vue‎

Lines changed: 93 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,76 @@
1212
enter-active-class="animated quick zoomIn"
1313
leave-active-class="animated quick zoomOut"
1414
>
15-
<li v-if="toggle" :style="{ 'background-color': bgColor }"
16-
@click="toParent(action.name)" class="pointer">
17-
<i class="material-icons">{{action.icon}}</i>
18-
</li>
15+
<template v-if="action.tooltip">
16+
<li v-if="toggle" :style="{ 'background-color': bgColor }"
17+
v-v-tooltip="{ content: action.tooltip, placement: tooltipPosition }"
18+
@click="toParent(action.name)" class="pointer">
19+
<i class="material-icons">{{action.icon}}</i>
20+
</li>
21+
</template>
22+
<template v-else>
23+
<li v-if="toggle" :style="{ 'background-color': bgColor }"
24+
@click="toParent(action.name)" class="pointer">
25+
<i class="material-icons">{{action.icon}}</i>
26+
</li>
27+
</template>
1928
</transition>
2029
</template>
2130
</ul>
2231
</transition>
2332
</div>
2433
<template v-if="rippleShow">
25-
<div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
26-
class="fab pointer" :style="{ 'background-color': bgColor }"
27-
>
28-
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
29-
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
30-
</div>
34+
<template v-if="mainTooltip">
35+
<div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
36+
v-v-tooltip="{ content: mainTooltip, placement: tooltipPosition }"
37+
class="fab pointer" :style="{ 'background-color': bgColor }"
38+
>
39+
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
40+
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
41+
</div>
42+
</template>
43+
<template v-else>
44+
<div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
45+
class="fab pointer" :style="{ 'background-color': bgColor }"
46+
>
47+
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
48+
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
49+
</div>
50+
</template>
3151
</template>
3252
<template v-else>
33-
<div @click="toggle = !toggle"
34-
class="fab pointer" :style="{ 'background-color': bgColor, 'z-index': zIndex }"
35-
>
36-
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
37-
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
38-
</div>
53+
<template v-if="mainTooltip">
54+
<div v-v-tooltip="{ content: mainTooltip, placement: tooltipPosition }"
55+
class="fab pointer" :style="{ 'background-color': bgColor }"
56+
>
57+
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
58+
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
59+
</div>
60+
</template>
61+
<template v-else>
62+
<div class="fab pointer" :style="{ 'background-color': bgColor }"
63+
>
64+
<i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
65+
<i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
66+
</div>
67+
</template>
3968
</template>
4069
</div>
4170
</template>
4271

4372
<script>
4473
import {mixin as clickaway} from 'vue-clickaway';
4574
import Ripple from 'vue-ripple-directive';
75+
import { VTooltip } from 'v-tooltip'
4676
4777
export default {
4878
mixins: [clickaway],
49-
directives: {Ripple},
79+
directives: {Ripple, VTooltip},
5080
data() {
5181
return {
5282
toggle: false,
53-
pos: {}
83+
pos: {},
84+
tooltipPosition: 'left'
5485
}
5586
},
5687
props: {
@@ -72,11 +103,13 @@
72103
mainIcon: {
73104
default: 'add'
74105
},
106+
mainTooltip: {
107+
default: null
108+
},
75109
actions: {}
76110
},
77111
computed: {
78112
listPos() {
79-
80113
if (this.position === 'top-right' || this.position === 'top-left') {
81114
return {
82115
top: '-20px',
@@ -116,6 +149,13 @@
116149
}
117150
},
118151
methods: {
152+
tooltipPos() {
153+
if(this.position === 'top-right' || this.position === 'bototm-right') {
154+
this.mainTooltip.placement = 'left'
155+
} else {
156+
this.mainTooltip.placement = 'right'
157+
}
158+
},
119159
toParent(name) {
120160
this.$emit(name);
121161
this.toggle = false;
@@ -164,6 +204,7 @@
164204
165205
this.$nextTick(() => {
166206
this.moveTransition();
207+
this.tooltipPos();
167208
});
168209
}
169210
},
@@ -176,6 +217,37 @@
176217
}
177218
</script>
178219

220+
<style>
221+
.tooltip {
222+
display: block !important;
223+
padding: .5rem 1rem;
224+
z-index: 10000;
225+
}
226+
227+
.tooltip .tooltip-inner {
228+
background: #333333;
229+
font-size: .85rem;
230+
color: white;
231+
padding: .2rem 1rem;
232+
}
233+
234+
.tooltip .tooltip-arrow{
235+
display: none;
236+
}
237+
238+
.tooltip[aria-hidden='true'] {
239+
visibility: hidden;
240+
opacity: 0;
241+
transition: opacity .15s, visibility .15s;
242+
}
243+
244+
.tooltip[aria-hidden='false'] {
245+
visibility: visible;
246+
opacity: 1;
247+
transition: opacity .15s;
248+
}
249+
</style>
250+
179251
<style scoped>
180252
.animated.quick {
181253
-webkit-animation-duration: .7s !important;
@@ -195,7 +267,7 @@
195267
height: 65px;
196268
display: flex;
197269
align-items: center;
198-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
270+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15);
199271
z-index: 2;
200272
}
201273
@@ -250,7 +322,7 @@
250322
display: flex;
251323
align-items: center;
252324
border-radius: 100px;
253-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
325+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15);
254326
}
255327
256328
.fab-list li .material-icons {

0 commit comments

Comments
 (0)