Zeen Component Library

# ZeenSpeechesSpeakers

Компонент ZeenSpeechesSpeakers

# Примеры:

    • 10:00 - 10:20

      10:00 -10:20

      Открытие трансляции

    • 10:20 - 10:50

      10:20 -10:50

      Выступление в стиле TED

      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса
      • Михаил Свердлов
        Директор по развитию бизнеса

    • 10:50 - 11:20

      10:50 -11:20

      Выступления в стиле TED

      • Юсеф Хесуани
        Со-основатель и Управляющий Партнер

    • 11:20 - 11:50

      11:20 -11:50

      Выступление в стиле TED

      • Максим Гашков
        Руководитель Центра внутренних инноваций

    • 11:50 - 12:00

      11:50 -12:00

      Перерыв

    • 12:00 - 12:30

      12:00 -12:30

      Выступление в стиле TED

      • Арик Ахвердян
        Основатель и генеральный директор

    • 12:30 - 13:00

      12:30 -13:00

      Выступления в стиле TED

      • Александр Чухонцев
        Директор по клиентскому опыту

    • 13:00 - 13:30

      13:00 -13:30

      Выступление в стиле TED

      • Михаил Чернышев
        Директор по клиентскому счастью

    • 13:30 - 13:50

      13:30 -13:50

      Закрытие

# Source Code - исходный код компонента

<template>
  <section class="speeches-speakers">
    <ZeenContainer>
      <ZeenSlideToggle v-model="model">
        <template v-if="schedule.name" #title>{{ schedule.name }}</template>
        <template v-else #title>
          <slot name="title-slide-toggle" />
        </template>
        <ul class="speeches-speakers__list">
          <li class="speeches-speakers__list-item" v-for="item in schedule.speeches" :key="item.id">
            <ZeenScheduleItem :speech="item" :buttonText="buttonText" />
          </li>
        </ul>
      </ZeenSlideToggle>
    </ZeenContainer>
  </section>
</template>

<script>
import ZeenScheduleItem from '../../../src/components/ZeenScheduleItem/ZeenScheduleItem'
import ZeenSlideToggle from '../../../src/components/ZeenSlideToggle/ZeenSlideToggle'
import ZeenContainer from '../../../src/components/ZeenContainer/ZeenContainer'

export default {
  name: 'ZeenSpeechesSpeakers',
  components: {ZeenContainer, ZeenScheduleItem, ZeenSlideToggle},
  model: {
    prop: 'modelValue',
    event: 'change',
  },
  props: {
    schedule: {
      type: Object,
      default: () => {},
      require: true,
    },
    buttonText: {
      type: Object,
      require: false,
    },
    modelValue: {
      require: true,
    },
  },
  computed: {
    model: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('change', val)
      },
    },
  },
}
</script>

<style scoped lang="scss">
@import '/src/styles/mixins.scss';

.speeches-speakers {
  &__list {
    padding: 0;
    list-style: none;

    &-item:not(:last-child) {
      margin-bottom: var(--zeen-schedule-speakers-speaker-item-margin-bottom);
    }
  }
}
</style>

← ZeenBlockCreateTable →