106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<template>
|
||
<!-- Arka plan resmi tam genişlikte section uzerine uygulanir -->
|
||
<section class="page-title" :style="props.image && imageType === 'background'
|
||
? { backgroundImage: `url(${props.image})`, backgroundSize: 'cover', backgroundPosition: 'center' }
|
||
: undefined" :class="{ 'has-bg-image': props.image && imageType === 'background' }">
|
||
<div class="container">
|
||
<div class="page-title-row">
|
||
<!-- Inline resim secenegi -->
|
||
<img v-if="props.image && imageType === 'inline'" :src="props.image" alt="page image"
|
||
class="page-title-image" />
|
||
|
||
<div class="page-title-content">
|
||
<h1 :style="props.color ? { color: props.color } : undefined">{{ props.title }}</h1>
|
||
<span v-if="props.subtitle" :style="props.color ? { color: props.color } : undefined">{{ props.subtitle
|
||
}}</span>
|
||
</div>
|
||
|
||
<nav v-if="props.breadcrumbs?.length" aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li v-for="(item, i) in props.breadcrumbs" :key="i" class="breadcrumb-item"
|
||
:class="{ active: i === props.breadcrumbs.length - 1 }"
|
||
:aria-current="i === props.breadcrumbs.length - 1 ? 'page' : undefined">
|
||
<a v-if="i < props.breadcrumbs.length - 1" :href="item.href">{{ item.label }}</a>
|
||
<template v-else>{{ item.label }}</template>
|
||
</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
interface Breadcrumb {
|
||
label: string
|
||
href?: string
|
||
}
|
||
|
||
// Provide defaults for props that are not required
|
||
const props = defineProps<{
|
||
title: string
|
||
subtitle?: string
|
||
breadcrumbs?: Breadcrumb[]
|
||
// Banner'dan gelen renk (#ff2600 gibi hex deger)
|
||
color?: string
|
||
// Arka plan resim URL'si
|
||
image?: string
|
||
// Resmin kullanim sekli: background veya inline
|
||
imageType?: 'background' | 'inline'
|
||
}>()
|
||
|
||
// computed ile reaktif imageType — prop async güncellendiğinde de doğru çalışır
|
||
const imageType = computed(() => props.imageType ?? 'background')
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Tam genislik arka plan - container disinda */
|
||
.page-title {
|
||
width: 100%;
|
||
min-height: 400px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.page-title.has-bg-image {
|
||
color: #fff;
|
||
}
|
||
|
||
.page-title .container {
|
||
width: 100%;
|
||
}
|
||
|
||
.page-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 40px 20px;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.page-title-image {
|
||
max-width: 140px;
|
||
max-height: 140px;
|
||
object-fit: cover;
|
||
margin-right: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.page-title-content h1 {
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.page-title-row {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.page-title-image {
|
||
margin: 0 0 12px 0;
|
||
}
|
||
}
|
||
</style>
|