Files
ui/src/runtime/components/navigation/Tabs.vue
2022-07-21 23:33:06 +02:00

50 lines
1022 B
Vue

<template>
<nav :class="wrapperClass">
<Link
v-for="(link, index) of links"
:key="index"
:to="link.to"
:exact="link.exact"
:class="baseClass"
:active-class="activeClass"
:inactive-class="inactiveClass"
>
{{ link.label }}
</Link>
</nav>
</template>
<script setup lang="ts">
import type { PropType } from 'vue'
import type { RouteLocationNormalized } from 'vue-router'
import Link from '../elements/Link.vue'
import $ui from '#build/ui'
defineProps({
links: {
type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
required: true
},
wrapperClass: {
type: String,
default: () => $ui.tabs.wrapper
},
baseClass: {
type: String,
default: () => $ui.tabs.base
},
activeClass: {
type: String,
default: () => $ui.tabs.active
},
inactiveClass: {
type: String,
default: () => $ui.tabs.inactive
}
})
</script>
<script lang="ts">
export default { name: 'UTabs' }
</script>