webguicomp/EssentialLink.vue
2023-08-20 12:36:42 +02:00

49 lines
801 B
Vue

<template>
<q-item clickable tag="a" target="_self" :href="link">
<q-item-section v-if="icon" avatar>
<q-icon :name="icon" />
</q-item-section>
<q-item-section class="menu">
<q-item-label>{{ title }}</q-item-label>
<q-item-label caption>{{ caption }}</q-item-label>
</q-item-section>
</q-item>
</template>
<style>
.menu {
font-family: monospace;
font-size: larger;
}
</style>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "EssentialLink",
props: {
title: {
type: String,
required: true,
},
caption: {
type: String,
default: "",
},
link: {
type: String,
default: "#",
},
icon: {
type: String,
default: "",
},
},
});
</script>