generated from alphane/template
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<!-- Special module scope required for exports -->
|
|
<script lang="ts">
|
|
import { RouteLocationRaw } from "vue-router"
|
|
|
|
type Breadcrumb = {
|
|
title: string
|
|
to: RouteLocationRaw
|
|
}
|
|
|
|
export { type Breadcrumb }
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string
|
|
breadcrumbs: Breadcrumb[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-3 mb-6">
|
|
<div class="d-flex justify-space-between">
|
|
<div class="d-flex py-0 align-center">
|
|
<div>
|
|
<h2 class="text-h3 mb-2">{{ props.title }}</h2>
|
|
<v-breadcrumbs
|
|
:items="props.breadcrumbs"
|
|
class="text-h6 font-weight-regular pa-0 ml-n1"
|
|
>
|
|
<template
|
|
v-if="props.breadcrumbs"
|
|
#divider
|
|
>
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</template>
|
|
<template #title="{ item }">
|
|
<h6 class="text-medium-emphasis text-subtitle-1">{{ item.title }}</h6>
|
|
</template>
|
|
</v-breadcrumbs>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-center">
|
|
<slot name="append" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.page-breadcrumb {
|
|
.v-toolbar {
|
|
background: transparent;
|
|
}
|
|
}
|
|
</style>
|