66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
|
<section
|
|
:class="{
|
|
'hero': true,
|
|
'hero-image': image
|
|
}"
|
|
:style="image && {
|
|
'background-image': `url('${image}')`
|
|
}">
|
|
<div class="hero-body">
|
|
<div :class="['container', containerClass]">
|
|
<div class="hero-content">
|
|
<h3 class="hero-title">{{ title }}</h3><!-- /.hero-title -->
|
|
|
|
<div v-if="withEntry" class="hero-entry">
|
|
<slot name="entry" />
|
|
</div><!-- /.hero-entry -->
|
|
|
|
<div v-if="withButton" class="hero-actions">
|
|
<slot name="buttons" />
|
|
</div><!-- /.hero-actions -->
|
|
</div><!-- /.hero-content -->
|
|
</div><!-- /.container -->
|
|
</div><!-- /.hero-body -->
|
|
</section><!-- /.hero -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
/**
|
|
* The name of the component.
|
|
*
|
|
* @type {Strng}
|
|
*/
|
|
name: 'Hero',
|
|
|
|
/**
|
|
* The supported properties of the component.
|
|
*
|
|
* @type {Object}
|
|
*/
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: () => {}
|
|
},
|
|
image: {
|
|
type: String,
|
|
default: () => {}
|
|
},
|
|
containerClass: {
|
|
type: String,
|
|
default: () => {}
|
|
},
|
|
withEntry: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
withButton: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|