# ZeenTeaser
Компонент ZeenTeaser
# Примеры:
# Source Code - исходный код компонента
<template lang="pug">
.zeen-teaser(:class='classTeaser' @click.prevent='teaserClick')
.zeen-teaser__left
slot(name='left')
.zeen-teaser__icon-wrapper(v-if='srcIcon')
slot(name='icon')
img.zeen-teaser__icon(:src='srcIcon')
.zeen-teaser__text-wrapper
ZeenHeadline.zeen-teaser__title(v-bind='attrsHeadline' v-if='title')
slot(name='title')
span {{ title }}
ZeenText.zeen-teaser__description(v-if='description' tag='p')
slot(name='description')
span {{ description }}
slot(name='button')
ZeenButton.zeen-teaser__button(@click.prevent='emitClick')
slot(name='buttonText')
span(v-if='isTextInButton') {{ buttonText }}
svg(v-else width='9' height='15' viewBox='0 0 9 15' xmlns='http://www.w3.org/2000/svg')
path(fill-rule='evenodd' clip-rule='evenodd' d='M1.31862 1.13368C1.869 0.644453 2.71176 0.694027 3.20099 1.2444L8.12406 6.78287C8.57311 7.28805 8.57311 8.04932 8.12406 8.5545L3.20099 14.093C2.71176 14.6433 1.869 14.6929 1.31862 14.2037C0.768246 13.7145 0.718672 12.8717 1.2079 12.3213L5.34358 7.66868L1.2079 3.01604C0.718672 2.46566 0.768246 1.6229 1.31862 1.13368Z')
.zeen-teaser__right
slot(name='right')
img.zeen-teaser__bg(:src='src' v-if='src')
</template>
<script>
export default {
name: 'Zeenteaser',
props: {
theme: {
type: String,
default: 'main',
validator: (theme) => ['main', 'small', 'card', 'card-small'].includes(theme),
},
data: {
type: [String, Number, Object],
},
srcIcon: {
type: String,
},
src: {
type: String,
},
title: {
type: String,
default: 'Заголовок',
},
description: {
type: String,
},
buttonText: {
type: String,
default: 'Открыть',
},
attrsHeadline: {
type: Object,
default: () => ({tag: 'h3'}),
},
},
methods: {
emitClick() {
this.$emit('call', this.data)
},
teaserClick() {
if (this.theme !== 'small') {
return
}
this.$emit('call', this.data)
},
},
computed: {
classTeaser() {
return {
[`zeen-teaser_${this.theme}`]: this.theme,
}
},
isTextInButton() {
return this.theme === 'main' || this.theme === 'card'
},
},
}
</script>
<style lang="scss" scoped>
@import '../../styles/mixins.scss';
.zeen-teaser {
display: flex;
background-color: var(--teaser-bg-color);
border-radius: var(--teaser-border-radius);
&_main {
padding: var(--teaser-padding-vertical) var(--teaser-padding-horizontal);
@include phones {
flex-direction: column-reverse;
padding: var(--teaser-padding-top-phone) var(--teaser-padding-horizontal) var(--teaser-padding-vertical);
}
.zeen-teaser__text-wrapper {
padding: var(--teaser-main-text-wrapper-padding-vertical) var(--teaser-main-text-wrapper-padding-horizontal);
}
}
&_small {
padding: var(--teaser-small-padding) var(--teaser-small-padding-right) var(--teaser-small-padding)
var(--teaser-small-padding);
cursor: pointer;
border-radius: var(--teaser-small-border-radius);
transition: all 0.25s ease;
&:hover {
background-color: var(--teaser-button-bg-color-hover);
.zeen-teaser__button {
--button-main-color: var(--teaser-button-bg-color-hover);
}
}
.zeen-teaser__right {
display: none;
}
.zeen-teaser__left {
width: 100%;
flex-direction: row;
align-items: center;
margin: 0;
}
.zeen-teaser__icon-wrapper {
width: var(--teaser-small-icon-width);
height: var(--teaser-small-icon-height);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
margin-right: var(--teaser-small-icon-margin-right);
}
.zeen-teaser__text-wrapper {
width: fit-content;
margin-right: var(--teaser-small-button-margin-left);
}
.zeen-teaser__title {
font-style: normal;
font-weight: var(--teaser-small-title-weight);
font-size: var(--teaser-small-title-size);
line-height: var(--teaser-small-title-line-height);
}
.zeen-teaser__description {
display: none;
}
.zeen-teaser__button {
--button-main-color: var(--teaser-bg-color);
pointer-events: none;
padding: 0;
margin: 0;
margin-left: auto;
width: unset;
path {
fill: var(--teaser-text-color);
}
}
}
&_card {
padding: var(--teaser-card-padding);
justify-content: flex-end;
.zeen-teaser__right {
display: none;
}
.zeen-teaser__left {
height: 100%;
width: 100%;
margin: 0;
}
.zeen-teaser__icon-wrapper {
width: var(--teaser-card-icon-width);
height: var(--teaser-card-icon-height);
border-radius: var(--teaser-card-icon-border-radius);
margin-bottom: var(--teaser-card-icon-margin-bottom);
}
.zeen-teaser__text-wrapper {
height: inherit;
}
.zeen-teaser__title {
font-style: normal;
font-weight: var(--teaser-card-title-weight);
font-size: var(--teaser-card-title-size);
line-height: var(--teaser-card-title-line-height);
}
.zeen-teaser__description {
font-style: normal;
font-weight: var(--teaser-card-description-weight);
font-size: var(--teaser-card-description-size);
line-height: var(--teaser-card-description-line-height);
margin-top: var(--teaser-card-description-margin-top);
margin-bottom: var(--teaser-card-description-margin-bottom);
}
.zeen-teaser__button {
margin-top: auto;
width: 100%;
}
}
&_card-small {
padding: var(--teaser-card-small-padding);
.zeen-teaser__right {
display: none;
}
.zeen-teaser__left {
width: 100%;
flex-direction: row;
align-items: flex-start;
margin: 0;
}
.zeen-teaser__icon-wrapper {
width: var(--teaser-card-small-icon-width);
height: var(--teaser-card-small-icon-height);
margin: 0;
margin-right: var(--teaser-card-small-icon-margin-right);
border-radius: var(--teaser-card-small-icon-border-radius);
}
.zeen-teaser__text-wrapper {
width: calc(
100% - var(--teaser-card-small-icon-width) - var(--teaser-card-small-icon-margin-right) -
var(--teaser-card-small-button-size) - var(--teaser-card-small-margin-left)
);
}
.zeen-teaser__title {
font-style: normal;
font-weight: var(--teaser-card-small-title-weight);
font-size: var(--teaser-card-small-title-size);
line-height: var(--teaser-card-small-title-line-height);
}
.zeen-teaser__description {
font-style: normal;
font-weight: var(--teaser-card-small-description-weight);
font-size: var(--teaser-card-description-size);
line-height: var(--teaser-card-small-description-line-height);
margin-top: var(--teaser-card-small-description-margin-top);
margin-bottom: 0;
}
.zeen-teaser__button {
width: var(--teaser-card-small-button-size);
min-width: var(--teaser-card-small-button-size);
height: var(--teaser-card-small-button-size);
margin: auto 0 0 var(--teaser-card-small-margin-left);
padding: 0;
border-radius: 50%;
}
}
&__left {
width: var(--teaser-left-width);
margin-right: var(--teaser-gap);
display: flex;
flex-direction: column;
}
&__right {
position: relative;
min-height: 100%;
width: calc(100% - var(--teaser-left-width) - var(--teaser-gap));
display: flex;
justify-content: flex-end;
@include phones() {
justify-content: center;
width: 100%;
min-height: var(--teaser-bg-min-height-phone);
max-height: var(--teaser-bg-max-height-phone);
}
}
&__icon-wrapper {
width: var(--teaser-icon-width);
height: var(--teaser-icon-height);
display: flex;
justify-content: center;
align-items: center;
background: var(--teaser-icon-bg-color);
border-radius: var(--teaser-icon-border-radius);
margin-bottom: var(--teaser-icon-margin-bottom);
}
&__icon {
object-fit: contain;
width: auto;
height: auto;
}
&__text-wrapper {
}
&__title {
font-style: normal;
font-weight: var(--teaser-title-weight);
font-size: var(--teaser-title-size);
line-height: var(--teaser-title-line-height);
color: var(--teaser-text-color);
}
&__description {
font-style: normal;
font-weight: var(--teaser-description-weight);
font-size: var(--teaser-description-size);
line-height: var(--teaser-description-line-height);
color: var(--teaser-text-color);
margin-top: var(--teaser-description-margin-top);
margin-bottom: var(--teaser-description-margin-bottom);
}
&__button {
--button-main-color: var(--teaser-button-bg-color);
--button-hover-color-base: var(--teaser-button-bg-color-hover);
--button-click-color-base: var(--teaser-button-bg-color-active);
--button-text-color-base: var(--teaser-button-text-color);
width: var(--teaser-button-width);
margin-top: var(--teaser-button-margin-top);
path {
fill: var(--teaser-button-text-color);
}
}
&__bg {
position: absolute;
object-fit: contain;
height: var(--teaser-bg-height);
width: auto;
}
}
</style>