Zeen Component Library

# ZeenTags

Компонент ZeenTags

# Примеры:

Размеры:

ZeenTags

zeen-tag-font-size

По умолчанию наследуется от main-small-text

zeen-tag-padding-vertical

zeen-tag-padding-horizonral

zeen-tag-radius

zeen-tag-font-weigh

zeen-tag-line-height

zeen-tags-item-padding

zeen-tags-item-margin

Цвета:

zeen-tag-color

По умолчанию наследуется от main-color

zeen-tag-background

По умолчанию наследуется от gray-1

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

Тэг
Второй тэг
Третий тэг

# props

Название Тип Обязательный По умолчанию Описание
tags Array массив тэгов

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

<template lang="pug">
  .zeen-tags
    .zeen-tags__item(v-for='tag in tags')
      span {{ tag }}
    slot(name='tag')
</template>

<script>
export default {
  name: 'ZeenTags',
  props: {
    tags: Array,
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --zeen-tag-font-size: var(--main-small-text);
  --zeen-tag-padding-vertical: 6px;
  --zeen-tag-padding-horizonral: 12px;
  --zeen-tag-radius: 8px;
  --zeen-tag-font-weight: 700;
  --zeen-tag-line-height: 1.4;
  --zeen-tags-item-padding: 6px;
  --zeen-tags-item-margin: -6px;

  /* Цвета */
  --zeen-tag-color: var(--main-color);
  --zeen-tag-background: var(--gray-1);
}
</style>

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

.zeen {
  &-tags {
    display: flex;
    flex-wrap: wrap;
    margin: var(--zeen-tags-item-margin);

    &__item {
      padding: var(--zeen-tags-item-padding);

      & span {
        display: inline-flex;
        font-weight: var(--zeen-tag-font-weight);
        font-size: var(--zeen-tag-font-size);
        line-height: var(--zeen-tag-line-height);
        text-transform: uppercase;
        color: var(--zeen-tag-color);
        padding: var(--zeen-tag-padding-vertical) var(--zeen-tag-padding-horizonral);
        background: var(--zeen-tag-background);
        border-radius: var(--zeen-tag-radius);
      }
    }
  }
}
</style>

← ZeenTestCardVert →