Zeen Component Library

# ZeenLeaderboard

Компонент ZeenLeaderboard

# Примеры:

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

Топ 5

1
Иванов Иван
40
2
John Doe
35
3
Ольга
25
4
Ольга Малыгина
20
5
Ольга Малыгина
15

Таблица лидеров

5
Ольга Малыгина
15
1
Иванов Иван
40
2
John Doe
35
3
Ольга
25
4
Ольга Малыгина
20
5
Ольга Малыгина
15
10
Ольга
10

# props

Название Тип Обязательный По умолчанию Описание
leaderboard array [] массив со списком лидеров
leaderUser object {} объект с данными юзера-лидера(отображает место авторизованного юзера в списке лидеров), если его нет, то блок не отображается
theme string general тема, которая передается ZeenLeaderboardItem и отвечает за внешний вид. general - стандартный, top-list - тема лидеров в топ-5

# slots

Название Описание
title слот для заголовка

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

<template lang="pug">
  section.zeen-leaderboard
    ZeenContainer
      slot(name='title')
      slot(name='leader-user')
        .zeen-leaderboard__user(v-if='leaderUser')
          ZeenLeaderboardItem(:item='leaderUser' theme='leader-user')
            template(v-for='(slot, slotName) in userLeaderSlots' v-slot:[slotName]='params')
              slot(:name='`${userLeaderPrefix}${slotName}`' v-bind='params')
      .zeen-leaderboard__list(:class='classList')
        .zeen-leaderboard__item(v-for='leader in leaderboard')
          ZeenLeaderboardItem(:item='leader' :theme='theme')
            template(v-for='(slot, slotName) in leaderboardSlots' v-slot:[slotName]='params')
              slot(:name='`${leaderboardPrefix}${slotName}`' v-bind='params')
</template>

<script>
import ZeenLeaderboardItem from '../../components/ZeenLeaderboardItem/ZeenLeaderboardItem.vue'
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer.vue'
import {createSlotsFor} from '../../helpers/createBlockData'
export default {
  name: 'ZeenLeaderboard',
  components: {
    ZeenLeaderboardItem,
    ZeenContainer,
  },
  props: {
    leaderboard: {
      type: Array,
      default: () => [],
    },
    leaderUser: {
      type: Object,
      default: () => {},
    },
    theme: {
      type: String,
      default: 'general',
      validator: (theme) => ['general', 'top-list'].includes(theme),
    },
  },
  computed: {
    leaderboardPrefix() {
      return 'leaderboard_'
    },
    leaderboardSlots() {
      return createSlotsFor(this, this.leaderboardPrefix)
    },
    userLeaderPrefix() {
      return 'user-leader_'
    },
    userLeaderSlots() {
      return createSlotsFor(this, this.userLeaderPrefix)
    },
    classList() {
      return {
        [`zeen-leaderboard_theme-${this.theme}`]: this.theme,
      }
    },
  },
}
</script>

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

:root {
  --zeen-leaderboard-user-margin-bottom: 24px;
  --zeen-leaderboard-margin-vertical: -8px;
  --zeen-leaderboard-margin-horizontal: 0;
  --zeen-leaderboard-padding-vertical: 8px;
  --zeen-leaderboard-padding-horizontal: 0;
  --zeen-leaderboard-width: 100%;
  --zeen-leaderboard-top-width: 20%;
  --zeen-leaderboard-top-padding-vertical: 10px;
  --zeen-leaderboard-top-padding-horizontal: 10px;
  --zeen-leaderboard-top-margin-vertical: -10px;
  --zeen-leaderboard-top-margin-horizontal: -10px;

  @include desktop {
    --zeen-leaderboard-top-width: 33.33%;
  }

  @include phones {
    --zeen-leaderboard-width: 100%;
    --zeen-leaderboard-padding-vertical: 4px;
    --zeen-leaderboard-margin-vertical: -4px;
    --zeen-leaderboard-padding-horizontal: 0;
    --zeen-leaderboard-margin-horizontal: 0;
    --zeen-leaderboard-top-width: 100%;
    --zeen-leaderboard-top-width: 100%;
    --zeen-leaderboard-top-padding-vertical: 4px;
    --zeen-leaderboard-top-margin-vertical: -4px;
    --zeen-leaderboard-top-padding-horizontal: 0;
    --zeen-leaderboard-top-margin-horizontal: 0;
  }
}
</style>

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

.zeen-leaderboard {
  &_theme {
    &-top-list {
      flex-direction: row;
      flex-wrap: wrap;
      margin: var(--zeen-leaderboard-top-margin-vertical) var(--zeen-leaderboard-top-margin-horizontal);

      & .zeen-leaderboard__item {
        width: var(--zeen-leaderboard-top-width);
        padding: var(--zeen-leaderboard-top-padding-vertical) var(--zeen-leaderboard-top-padding-horizontal);
      }
    }

    &-general {
      flex-direction: column;
    }
  }

  &__user {
    margin-bottom: var(--zeen-leaderboard-user-margin-bottom);
  }

  &__list {
    display: flex;
    margin: var(--zeen-leaderboard-margin-vertical) var(--zeen-leaderboard-margin-horizontal);
  }

  &__item {
    padding: var(--zeen-leaderboard-padding-vertical) var(--zeen-leaderboard-padding-horizontal);
    width: var(--zeen-leaderboard-width);
  }
}
</style>

← ZeenTeaserSection →