Zeen Component Library

# ZeenHeadline

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

# Примеры:

  • Передача обязательного параметра уровня заголовка. Поддерживает от 1 до 5 уровня

    1. Уровень - 1

      :tag="'h1'"

      Это текст внутри компонента

    2. Уровень - 2

      :tag="'h2'"

      Это текст внутри компонента

    3. Уровень - 3

      :tag="'h3'"

      Это текст внутри компонента

    4. Уровень - 4

      :tag="'h4'"

      Это текст внутри компонента

    5. Уровень - 5

      :tag="'h5'"
      Это текст внутри компонента

  • Передача цветовой темы

    1. Тема - main

      :tag="'h2'" :theme="'main'"

      Это текст внутри компонента

    2. Тема - light

      :tag="'h2'" :theme="'light'"

      Это текст внутри компонента

    3. Тема - dark

      :tag="'h2'" :theme="'dark'"

      Это текст внутри компонента

  • Передача type

    1. Type - main-18

      :tag="'h2'" :type="'main-18'"

      Это текст внутри компонента

    2. Type - main-24

      :tag="'h2'" :type="'main-24'"

      Это текст внутри компонента

    3. Type - main-36

      :tag="'h2'" :type="'main-36'"

      Это текст внутри компонента

    4. Type - main-48

      :tag="'h2'" :type="'main-48'"

      Это текст внутри компонента

    5. Type - main-64

      :tag="'h2'" :type="'main-64'"

      Это текст внутри компонента

  • Передача цвета

    :tag="'h2'" :color="'red'"

    Это текст внутри компонента

# props

Название Тип Обязательный По умолчанию Описание
theme string - dark тема, доступно 3 варианта dark/light/main - по умолчанию используется dark
type string - - Предустановленные цвета и размеры. Где первое слово это название темы, а второе цифра размера шрифта (полную таблицу см. ниже)
color string - - уникальный цвет текста
size number - 18 Кастомный размер шрифта

# Значения свойства type

Название Тема Размер шрифта
light-18 light 18
light-24 light 24
light-36 light 36
light-48 light 48
light-64 light 64
dark-18 dark 18
dark-24 dark 24
dark-36 dark 36
dark-48 dark 48
dark-64 dark 64
main-18 main 18
main-24 main 24
main-36 main 36
main-48 main 48
main-64 main 64

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

<template>
  <component class="zeen-headline" :class="classList" ref="main" :is="tag">
    <slot />
  </component>
</template>

<script>
export default {
  name: 'ZeenHeadline',
  props: {
    tag: {
      type: String,
      default: 'h2',
      validator: (level) => ['h1', 'h2', 'h3', 'h4', 'h5', 'div'].includes(level),
    },
    theme: {
      type: String,
      default: 'dark',
      validator: (theme) => ['dark', 'light', 'main'].includes(theme),
    },
    type: {
      type: String,
      required: false,
      validator: (type) =>
        type
          .replace('-', ' ')
          .split(' ')
          .every((value) => ['light', 'dark', 'main', '18', '24', '36', '48', '64'].includes(value)),
    },
    color: String,
  },
  computed: {
    classList() {
      return {
        [`zeen-headline_${this.componentTheme}`]: true,
        [`zeen-headline_tag-${this.tag}`]: true,
        [`zeen-headline_size-${this.componentSize}`]: this.componentSize,
      }
    },
    componentTheme() {
      return this.splitType?.[0] ?? this.theme
    },
    componentSize() {
      return this.splitType?.[1]
    },
    splitType() {
      return this.type ? this.type.split('-') : null
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --headline-size: var(--main-bigger-size);
  --headline-size-middle: var(--main-large-size);
  --headline-size-big: var(--main-larger-size);
  --headline-size-large: var(--main-largest-size);
  --headline-size-unreal: var(--main-notbigget-size);
  --headline-size-line-height: 1.44;
  --headline-padding-vertical: 0;
  --headline-padding-horizontal: 0;
  --headline-margin-vertical: 0;
  --headline-margin-horizontal: 0;

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

<style lang="scss" scoped>
.zeen-headline {
  --text-color: var(--headline-color);
  --text-size: var(--headline-size);

  color: var(--text-color);
  font-size: var(--text-size);
  line-height: var(--headline-size-line-height);
  border: none;
  padding: var(--headline-padding-vertical) var(--headline-padding-horizontal);
  margin: var(--headline-margin-vertical) var(--headline-margin-horizontal);

  &_light {
    --text-color: var(--headline-color-light);
  }

  &_main {
    --text-color: var(--headline-color-main);
  }

  &_tag {
    &-h1 {
      --text-size: var(--headline-size-unreal);
    }

    &-h2 {
      --text-size: var(--headline-size-large);
    }

    &-h3 {
      --text-size: var(--headline-size-big);
    }

    &-h4 {
      --text-size: var(--headline-size-middle);
    }

    &-h5 {
      --text-size: var(--headline-size);
    }
  }

  &_size {
    &-64 {
      --text-size: var(--headline-size-unreal);
    }

    &-48 {
      --text-size: var(--headline-size-large);
    }

    &-36 {
      --text-size: var(--headline-size-big);
    }

    &-24 {
      --text-size: var(--headline-size-middle);
    }

    &-18 {
      --text-size: var(--headline-size);
    }
  }
}
</style>

← ZeenLink →