Zeen Component Library

# ZeenSmallBadge

Компонент ZeenSmallBadge для текста

# Примеры:

Размеры:

smallBadge

small-badge-radius

small-badge-padding-horizontal

small-badge-padding-vertical

small-badge-size

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

Цвета:

small-badge-background

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

small-badge-color

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

default

Супер важная компания, которых мало на этой бренной земле

:maxLenght="21"
:radius="10"
:style="{
'--small-badge-color': '#076AA8',
'--small-badge-background':'#e0e0a0',
'--small-badge-size':'14px',
}"

Супер важная компания

# props

Название Тип Обязательный По умолчанию Описание
maxLenght Number - 57 Ограничение количества вводимых в text символов
text String - - Если используется maxLenght то текст вводится сюда
radius Number - - Радиус компонента

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

<template>
  <div
    class="small-badge"
    :style="{
      '--small-badge-radius': radius ? radius + 'px' : undefined,
    }"
  >
    <ZeenText class="small-badge__text">
      <slot>{{ textLength }}</slot>
    </ZeenText>
  </div>
</template>

<script>
import ZeenText from '../ZeenText/ZeenText'

export default {
  name: 'ZeenSmallBadge',
  components: {
    ZeenText,
  },
  props: {
    text: {
      type: String,
    },
    maxLenght: {
      type: Number,
      default: 57,
    },
    radius: {
      type: Number,
    },
  },
  computed: {
    styles() {
      const styles = {}
      if (this.background) {
        styles['--small-badge-background'] = this.background
      }
      if (this.radius) {
        styles['--small-badge-radius'] = this.radius + 'px'
      }

      return styles
    },
    textLength() {
      if (this.text?.length > this.maxLenght) {
        return this.text.slice(0, this.maxLenght)
      }
      return this.text
    },
  },
}
</script>

<style>
:root {
  /* Размеры */
  --small-badge-radius: 4px;
  --small-badge-padding-horizontal: 12px;
  --small-badge-padding-vertical: 6px;
  --small-badge-size: var(--main-smallest-text);

  /* Цвета */
  --small-badge-background: var(--main-color);
  --small-badge-color: var(--main-light);
}
</style>

<style lang="scss" scoped>
.small-badge {
  --text-base-size: var(--small-badge-size);
  --text-base-color: var(--small-badge-color);

  display: inline-flex;
  padding: var(--small-badge-padding-vertical) var(--small-badge-padding-horizontal);
  background: var(--small-badge-background);
  border-radius: var(--small-badge-radius);

  &__text {
    margin: 0;
    padding: 0;
    width: 100%;
    word-wrap: break-word;
  }
}
</style>

← ZeenSocialLinkIcon →