# ZeenScheduleSpeakers
Компонент ZeenScheduleSpeakers
# Примеры:
Размеры:
ZeenScheduleSpeakers
zeen-schedule-speakers-top-margin-bottom
zeen-schedule-speakers-title-size
По умолчанию наследуется от main-bigger-size
zeen-schedule-speakers-title-font-weight
zeen-schedule-speakers-title-line-height
zeen-schedule-speakers-arrow-margin-right
zeen-schedule-speakers-speaker-item-margin-bottom
Цвета:
zeen-schedule-speakers-title-color
По умолчанию наследуется от main-text-color
zeen-schedule-speakers-speaker-color
По умолчанию наследуется от gray-4
Спикеры
Владимир Химаныч
Руководитель дирекции обслуживания корпоративных клиентов и инвестиционно-банковских операций, руководитель дирекции обслуживания корпоративных клиентов и инвестиционно-банковских операций
Аркадий Пожарский
Руководитель дирекции обслуживания физических лиц и малого бизнеса
Аркадий Пожарский
Руководитель дирекции по управлению рисками
Аркадий Пожарский
Руководитель административно-хозяйственного управления
# props
| Название | Тип | Обязательный | По умолчанию | Описание |
|---|---|---|---|---|
| speakers | Array | - | [] | Массив со спикерами |
| speakersText | Object | - | speaker: 'Спикер', speakers: 'Спикеры' | Объект с текстом спикеров в ед. и мн. числе |
# Source Code - исходный код компонента
<template lang="pug">
div.schedule-speakers
.schedule-speakers__top(v-if="speakers.length")
.schedule-speakers__title {{speakersWord}}
.schedule-speakers__actions(v-if='speakers.length > 2')
slot(name="arrows")
button.schedule-speakers__arrow.rotate(ref='btnPrev')
svg(
width="22"
height="20"
viewBox="0 0 27 24"
xmlns="http://www.w3.org/2000/svg"
)
path(
fill-rule="evenodd"
clip-rule="evenodd"
d="M27 12C27 11.4477 26.5523 11 26 11H1C0.447716 11 0 11.4477 \
0 12C0 12.5523 0.447716 13 1 13H26C26.5523 13 27 12.5523 27 12Z"
)
path(
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.2628 0.324281C12.8897 0.7314 12.9172 1.36397 13.3243 \
1.73716L24.5201 12L13.3243 22.2629C12.9172 22.636 12.8897 23.2686 \
13.2628 23.6757C13.636 24.0828 14.2686 24.1104 14.6757 23.7372L26.6757 \
12.7372C26.8824 12.5477 27 12.2803 27 12C27 11.7197 26.8824 11.4523 \
26.6757 11.2629L14.6757 0.262852C14.2686 -0.110341 13.636 -0.0828378 \
13.2628 0.324281Z"
)
button.schedule-speakers__arrow(ref='btnNext')
svg(
width="22"
height="20"
viewBox="0 0 27 24"
xmlns="http://www.w3.org/2000/svg"
)
path(
fill-rule="evenodd"
clip-rule="evenodd"
d="M27 12C27 11.4477 26.5523 11 26 11H1C0.447716 11 0 11.4477 \
0 12C0 12.5523 0.447716 13 1 13H26C26.5523 13 27 12.5523 27 12Z"
)
path(
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.2628 0.324281C12.8897 0.7314 12.9172 1.36397 13.3243 \
1.73716L24.5201 12L13.3243 22.2629C12.9172 22.636 12.8897 23.2686 \
13.2628 23.6757C13.636 24.0828 14.2686 24.1104 14.6757 23.7372L26.6757 \
12.7372C26.8824 12.5477 27 12.2803 27 12C27 11.7197 26.8824 11.4523 \
26.6757 11.2629L14.6757 0.262852C14.2686 -0.110341 13.636 -0.0828378 \
13.2628 0.324281Z"
)
.swiper-container(ref='slider' )
.swiper-wrapper
.swiper-slide(v-for='speaker in speakers' :key="speaker.id")
ZeenSpeakerItem.schedule-speakers__speaker(:speaker='speaker')
</template>
<script>
import Swiper from 'swiper/bundle'
import ZeenSpeakerItem from '../ZeenSpeakerItem/ZeenSpeakerItem'
import ZeenButton from '../ZeenButton/ZeenButton'
export default {
name: 'ZeenScheduleSpeakers',
components: {
ZeenButton,
ZeenSpeakerItem,
},
props: {
speakers: {
type: Array,
default: () => [],
},
speakersText: {
type: Object,
default() {
return {
speaker: 'Спикер',
speakers: 'Спикеры',
}
},
},
opened: {
type: Boolean,
default: false,
},
},
data() {
return {
slider: null,
}
},
destroyed() {
this.slider?.destroy(true, true)
},
methods: {
initSlider() {
const config = {
slidesPerView: 2,
spaceBetween: 20,
navigation: {
prevEl: this.$refs.btnPrev,
nextEl: this.$refs.btnNext,
},
breakpoints: {
1366: {
slidesPerView: 2,
spaceBetween: 20,
},
1024: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
320: {
slidesPerView: 1,
spaceBetween: 20,
},
},
}
this.slider = new Swiper(this.$refs.slider, config)
this.updateSlider()
},
async updateSlider() {
if (!this.slider) {
return
}
await this.$nextTick()
this.slider.update()
},
},
computed: {
speakersWord() {
return this.speakers?.length > 1 ? this.speakersText.speakers : this.speakersText.speaker
},
},
watch: {
opened() {
this.initSlider()
},
speakers() {
setTimeout(() => {
this.updateSlider()
}, 1000)
},
},
}
</script>
<style lang="scss">
@import '../../styles/mixins.scss';
:root {
/* Размеры */
--zeen-schedule-speakers-top-margin-bottom: 30px;
--zeen-schedule-speakers-title-size: var(--main-bigger-size);
--zeen-schedule-speakers-title-font-weight: 500;
--zeen-schedule-speakers-title-line-height: 1.33;
--zeen-schedule-speakers-arrow-margin-right: 25px;
/* Цвета */
--zeen-schedule-speakers-title-color: var(--main-text-color);
--zeen-schedule-speakers-speaker-color: var(--gray-4);
}
</style>
<style lang="scss" scoped>
@import '../../styles/mixins.scss';
.schedule-speakers {
&__actions {
@include phones {
display: none;
}
}
&__top {
display: flex;
justify-content: space-between;
margin-bottom: var(--zeen-schedule-speakers-top-margin-bottom);
}
&__title {
font-weight: var(--zeen-schedule-speakers-title-font-weight);
font-size: var(--zeen-schedule-speakers-title-size);
line-height: var(--zeen-schedule-speakers-title-line-height);
color: var(--zeen-schedule-speakers-title-color);
}
&__arrow {
background-color: transparent;
padding: 0;
outline: none;
border: 0;
cursor: pointer;
fill: var(--action-icon-color);
&.rotate {
margin-right: var(--zeen-schedule-speakers-arrow-margin-right);
transform: rotateY(180deg);
}
&:hover {
fill: var(--action-icon-hover-color);
}
&:focus {
fill: var(--action-icon-focus-color);
}
&:active {
fill: var(--action-icon-active-color);
}
&:disabled {
cursor: auto;
fill: var(--action-icon-disable-color);
}
}
&__speaker {
--speaker-item-post-color: var(--zeen-schedule-speakers-speaker-color);
}
}
</style>