49 lines
954 B
Vue
49 lines
954 B
Vue
<script setup>
|
|
import {ref} from 'vue';
|
|
|
|
const props = defineProps({
|
|
href: {
|
|
type: String,
|
|
default: '/',
|
|
},
|
|
icon: String,
|
|
icon_before: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
text_on_hover: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
});
|
|
const hover = ref(0);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-container" @mouseover="hover = true" @mouseleave="hover = false">
|
|
<img :src="icon" v-if="icon_before && icon != null">
|
|
<a :href="href">
|
|
<div :hidden="text_on_hover && !hover">
|
|
<slot></slot>
|
|
</div>
|
|
</a>
|
|
<img :src="icon" v-if="!icon_before && icon != null">
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.flex-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
a {
|
|
font-size: 2.5vh;
|
|
margin: 10px;
|
|
}
|
|
img {
|
|
display: inline-block;
|
|
height: 1.8em;
|
|
position: relative;
|
|
}
|
|
</style> |