Zeen Component Library

# ZeenTimeLabel

Компонент с временной меткой. Он используется в модулях расписания.

Временная метка бывает двух видов:

  • Активная (сейчас идёт)
  • Неактивная (прошла или не началась)

# Example

Активный с точкой

11:00-12:30

Активный

11:00-12:30

Неактивный

13:00-14:30

Активный с пропсами

11:00-12:30

Неактивный с пропсами

13:00-14:30

# Source Code

<template lang="pug">
  .time
    .time__normal(
      :class="classList")
      span.time__text {{speech.time_begin}}-{{speech.time_end}}
</template>

<script>
export default {
  name: 'ZeenTimeLabel',
  props: {
    speech: {
      type: Object,
      default: () => {
        return {}
      },
    },
    isDot: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classList() {
      const isOnline = this.speech.status === 'online'

      return {
        [`time_${this.speech.status}`]: this.speech.status,
        time_disabled: !isOnline,
        time_dot: this.isDot && isOnline,
      }
    },
  },
}
</script>

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

:root {
  /* Размеры */
  --time-label-size: var(--main-small-text, 14px);
  --time-label-font-weight: 400;
  --time-label-border-radius: 100px;
  --time-label-dot-size: 5px;
  --time-label-dot-border-radius: 50%;

  /* Цвета */
  --time-label-base-color: var(--main-color);
  --time-label-base-backgound: transparent;
  --time-label-base-border-color: transparent;

  --time-label-online-color: var(--main-color);
  --time-label-online-backgound: transparent;
  --time-label-online-border-color: var(--main-color);

  --time-label-disabled-color: var(--gray-2);
  --time-label-disabled-backgound: transparent;
  --time-label-disabled-border-color: var(--gray-2);

  --time-label-dot-background: var(--main-danger-color);
}
</style>

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

.time {
  flex-shrink: 0;
  --time-label-color: var(--time-label-base-color);
  --time-label-backgound: var(--time-label-base-backgound);
  --time-label-border-color: var(--time-label-base-border-color);

  &__normal {
    //todo - вынести в переменные
    border: 1px solid var(--time-label-border-color);
    //todo - вынести в переменные
    padding: 6px 12px;
    width: fit-content;
    flex: 0 0 auto;
    background: var(--time-label-backgound);
    border-radius: var(--time-label-border-radius);

    @include phones {
      //todo - вынести в переменные
      padding: 7px 12px;
    }
  }

  &_online {
    --time-label-color: var(--time-label-online-color);
    --time-label-backgound: var(--time-label-online-backgound);
    --time-label-border-color: var(--time-label-online-border-color);
  }

  &_disabled {
    --time-label-color: var(--time-label-disabled-color);
    --time-label-backgound: var(--time-label-disabled-backgound);
    --time-label-border-color: var(--time-label-disabled-border-color);
  }

  &_dot {
    .time__text {
      &::before {
        content: '';
        display: inline-block;
        width: var(--time-label-dot-size);
        height: var(--time-label-dot-size);
        border-radius: var(--time-label-dot-border-radius);
        //todo - вынести в переменные
        margin-right: 5px;
        background: var(--time-label-dot-background);
      }
    }
  }

  &__text {
    display: flex;
    align-items: center;
    color: var(--time-label-color);
    font-size: var(--time-label-size);
    font-weight: var(--time-label-font-weight);
    line-height: 1.4;
  }
}
</style>

# props

Название Тип Обязательный По умолчанию Описание
speech Object + - принимает массив с данными: time_begin - время начала, time_end - время окончания, status - статус: online - задает лейблу активный статус, любой другой - неактивный
isDot Boolean - false добавляет точку у активного лейбла

# Кастомные цвета и стили

Название Тип Обязательный По умолчанию Описание
timeLabelActiveTextColor String - - цвет текста активного лейбла
timeLabelDisabledTextColor String - - цвет текста неактивного лейбла
timeLabelFontSize Number - 14 размер текста
timeLabelFontWeight Number - 400 толщина текста
timeLabelActiveBackground String - - цвет фона активного лейбла
timeLabelDisabledBackground String - - цвет фона неактивного лейбла
timeLabelActiveBorderColor String - - цвет бордера активного лейбла
timeLabelDisabledBorderColor String - - цвет бордера неактивного лейбла
timeLabelBorderRadius Number - 20 скругление
timeLabelDotBackground String - - цвет точки

← ZeenVotingModal →