ZeenLeaderboardItem

Компонент ZeenLeaderboardItem

Примеры:

Примеры использования ZeenLeaderboardItem

2

Имя лидера

40

2

Имя лидера

40

спопсов

2

Имя лидера

40

props

| Название | Тип | Обязательный | По умолчанию | Описание | | item | Object | | {} | объект лидера | | theme | String | | general | тема вида карточки лидера, general - обычный(используется в таблице лидеров), top-list - вид для лидеров, которые находятся в топ-5, leader-user - вид для юзера-лидера(место авторизованного юзера в списке лидеров) |

slots

Название	Описание
position	номер места лидера в списке
name	имя лидера
points-count	количество заработанных баллов
icon	иконка баллов

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

<template lang="pug">
  .zeen-leader(:class='classList')
    .zeen-leader__part
      slot(name='position' :item='item')
        .zeen-leader__position {{ item.position }} 
      slot(name='name' :item='item')
        .zeen-leader__name {{ item.name }} 
    .zeen-leader__part
      slot(name='points-count' :item='item')
        .zeen-leader__points-count {{ item.points_count }} 
      slot(name='icon')
        .zeen-leader__icon
</template>

<script>
export default {
  name: 'ZeenLeaderboardItem',
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    theme: {
      type: String,
      default: 'general',
      validator: (theme) => ['general', 'top-list', 'leader-user'].includes(theme),
    },
  },
  computed: {
    classList() {
      return {
        [`zeen-leader_theme-${this.theme}`]: this.theme,
      }
    },
  },
}
</script>

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

:root {
  /* Размеры */
  --zeen-leaderboard-item-size: var(--main-size);
  --zeen-leaderboard-item-padding-vertical: 20px;
  --zeen-leaderboard-item-padding-horizontal: 40px;
  --zeen-leaderboard-item-border-radius: 20px;
  --zeen-leaderboard-item-border-width: 1px;
  --zeen-leaderboard-item-position-weight: 400;
  --zeen-leaderboard-item-text-weight: 600;
  --zeen-leaderboard-item-text-size: 24px;
  --zeen-leaderboard-item-position-line-height: 1.5;
  --zeen-leaderboard-item-position-width: 57px;
  --zeen-leaderboard-item-text-line-height: 1.33;
  --zeen-leaderboard-item-position-margin-bottom: 45px;
  --zeen-leaderboard-item-name-margin-bottom: 4px;
  --zeen-leaderboard-item-icon-width: 20px;
  --zeen-leaderboard-item-icon-height: 18px;
  --zeen-leaderboard-item-icon-margin-left: 10px;
  --zeen-leaderboard-item-top-border-radius: 23px;
  --zeen-leaderboard-item-top-padding-vertical: 20px;
  --zeen-leaderboard-item-top-padding-horizontal: 20px;
  --zeen-leaderboard-item-top-position-weight: 700;
  --zeen-leaderboard-item-top-position-text-size: 32px;
  --zeen-leaderboard-item-top-position-line-height: 1;
  --zeen-leaderboard-item-top-text-weight: 600;
  --zeen-leaderboard-item-top-text-size: 16px;
  --zeen-leaderboard-item-top-text-line-height: 1.3;
  --zeen-leaderboard-item-top-points-text-weight: 400;
  --zeen-leaderboard-item-top-points-text-size: 16px;
  --zeen-leaderboard-item-top-points-text-line-height: 1.5;

  @include tablets {
    --zeen-leaderboard-item-text-size: 18px;
  }

  @include phones {
    --zeen-leaderboard-item-padding-horizontal: 16px;
    --zeen-leaderboard-item-padding-vertical: 16px;
    --zeen-leaderboard-item-border-radius: 16px;
    --zeen-leaderboard-item-text-size: 14px;
    --zeen-leaderboard-item-icon-width: 17px;
    --zeen-leaderboard-item-icon-height: 15px;
    --zeen-leaderboard-item-icon-nargin-left: 6px;
    --zeen-leaderboard-item-position-margin-bottom: 0;
    --zeen-leaderboard-item-name-margin-bottom: 0;
    --zeen-leaderboard-item-position-width: 32px;
    --zeen-leaderboard-item-top-border-radius: 16px;
    --zeen-leaderboard-item-top-padding-vertical: 16px;
    --zeen-leaderboard-item-top-padding-horizontal: 16px;
    --zeen-leaderboard-item-top-position-text-size: 14px;
    --zeen-leaderboard-item-top-position-weight: 600;
    --zeen-leaderboard-item-top-text-line-height: 1.4;
    --zeen-leaderboard-item-top-text-size: 14px;
    --zeen-leaderboard-item-top-text-line-height: 1.4;
    --zeen-leaderboard-item-top-points-text-size: 14px;
    ---zeen-leaderboard-item-top-points-text-line-height: 1.4;
  }

  /* Цвета */
  --zeen-leaderboard-item-color: var(--gray-3);
  --zeen-leaderboard-item-text-color: var(--main-text-color);
  --zeen-leaderboard-item-border-color: transperent;
  --zeen-leaderboard-item-user-color: var(--main-light);
  --zeen-leaderboard-item-user-border-color: var(--main-color);
  --zeen-leaderboard-item-top-color: var(--main-color);
}
</style>

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

.zeen-leader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--zeen-leaderboard-item-padding-vertical) var(--zeen-leaderboard-item-padding-horizontal);
  border-radius: var(--zeen-leaderboard-item-border-radius);
  border: var(--zeen-leaderboard-item-border-width) solid var(--zeen-leaderboard-item-border-color);
  background-color: var(--zeen-leaderboard-item-color);
  color: var(--zeen-leaderboard-item-text-color);

  &__part {
    display: inline-flex;
    align-items: center;
  }

  &__position {
    font-weight: var(--zeen-leaderboard-item-position-weight);
    font-size: var(--zeen-leaderboard-item-text-size);
    line-height: var(--zeen-leaderboard-item-position-line-height);
    display: flex;
    min-width: var(--zeen-leaderboard-item-position-width);
  }

  &__name,
  &__points-count {
    font-weight: var(--zeen-leaderboard-item-text-weight);
    font-size: var(--zeen-leaderboard-item-text-size);
    line-height: var(--zeen-leaderboard-item-text-line-height);
  }

  &__icon {
    background-image: url('../../images/icons/points.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--zeen-leaderboard-item-icon-width);
    height: var(--zeen-leaderboard-item-icon-height);
    margin-left: var(--zeen-leaderboard-item-icon-margin-left);
  }

  &_theme {
    &-leader-user {
      background-color: var(--zeen-leaderboard-item-user-color);
      border: var(--zeen-leaderboard-item-border-width) solid var(--zeen-leaderboard-item-user-border-color);
    }

    &-top-list {
      flex-direction: column;
      align-items: flex-start;
      justify-content: inherit;
      height: 100%;
      border-radius: var(--zeen-leaderboard-item-top-border-radius);
      padding: var(--zeen-leaderboard-item-top-padding-vertical) var(--zeen-leaderboard-item-top-padding-horizontal);
      background-color: var(--zeen-leaderboard-item-top-color);
      color: var(--main-light);

      @include phones {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      & .zeen-leader__part {
        &:first-of-type {
          flex-direction: column;
          align-items: inherit;
          height: 100%;

          @include phones {
            flex-direction: row;
            align-items: center;
          }
        }

        &:last-of-type {
          flex-direction: row;
        }
      }

      & .zeen-leader__position {
        margin-bottom: var(--zeen-leaderboard-item-position-margin-bottom);
        font-weight: var(--zeen-leaderboard-item-top-position-weight);
        font-size: var(--zeen-leaderboard-item-top-position-text-size);
        line-height: var(--zeen-leaderboard-item-top-position-line-height);
      }

      & .zeen-leader__name {
        margin-bottom: var(--zeen-leaderboard-item-name-margin-bottom);
        font-weight: var(--zeen-leaderboard-item-top-text-weight);
        font-size: var(--zeen-leaderboard-item-top-text-size);
        line-height: var(--zeen-leaderboard-item-top-text-line-height);
      }

      & .zeen-leader__points-count {
        margin-top: auto;
        font-weight: var(--zeen-leaderboard-item-top-points-text-weight);
        font-size: var(--zeen-leaderboard-item-top-points-text-size);
        line-height: var(--zeen-leaderboard-item-top-points-text-line-height);
      }

      & .zeen-leader__icon {
        display: none;
      }
    }
  }
}
</style>