You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
1.9 KiB
106 lines
1.9 KiB
<template>
|
|
<v-tooltip
|
|
:top="top"
|
|
:bottom="bottom"
|
|
:left="left"
|
|
:right="right"
|
|
:color="tooltipColor"
|
|
:transition="transition"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
slot="activator"
|
|
fab
|
|
:color="buttonColor"
|
|
:dark="dark"
|
|
:light="light"
|
|
v-on="on"
|
|
@click="$emit('click')"
|
|
:small="small"
|
|
:large="large"
|
|
:x-large="xLarge"
|
|
:x-small="xSmall"
|
|
>
|
|
<v-icon dark>{{ icon }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ text }}</span>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "tooltipButton",
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: "WMi-user",
|
|
},
|
|
buttonColor: {
|
|
type: String,
|
|
default: "black",
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: "متن پیش فرض",
|
|
},
|
|
tooltipColor: {
|
|
type: String,
|
|
default: "black",
|
|
},
|
|
top: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return !this.bottom && !this.left && !this.right ? true : false;
|
|
},
|
|
},
|
|
bottom: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
right: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
transition: {
|
|
type: String,
|
|
default: "fade-transition",
|
|
},
|
|
dark: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return !this.light ? true : false;
|
|
},
|
|
},
|
|
light: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
small: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return !this.large && !this.xSmall && !this.xLarge ? true : false;
|
|
},
|
|
},
|
|
large: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
xSmall: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
xLarge: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |