Zeen Component Library

# ZeenActionIcon

Компонент-обертка для иконок svg, который задает им размер

# Примеры:

  • Дефолтный размер small - ширина 10px

  • Размер middle - ширина 15px

  • Размер big - ширина 26px

  • Темы

    Default

    Dark

    Кастомные цвета в default теме

    Кастомные цвета в dark теме

# props

Название Тип Обязательный По умолчанию Описание
size string - small Размер отличается по ширине. Small - 10px, middle - 15px, big - 26px. Высота везде auto
theme string - default Тема default содержит основной цвет иконки в ховере и клике, а тема dark - темные цвета.
disabled boolean - - Если true, то кнопка становится disabled
color object - {} объект с кастомными цветами (подробнее см.ниже)

# Кастомные цвета в объекте color

Название Тип Обязательный По умолчанию
iconDefaultNormalColor основной цвет иконки в дефолтной теме - берет значение из темы ($icon-default-normal-color)
iconDefaultHoverColor цвет иконки при ховере в дефолтной теме - берет значение из темы ($icon-default-hover-color)
iconDefaultClickColor цвет для состояний focus и active в дефолтной теме - берет значение из темы ($icon-default-click-color)
iconDarkNormalColor основной цвет иконки в темной теме - берет значение из темы ($icon-dark-normal-color)
iconDarkHoverColor цвет иконки при ховере в темной теме - берет значение из темы ($icon-dark-hover-color)
iconDarkClickColor цвет для состояний focus и active в темной теме - берет значение из темы ($icon-dark-click-color)
iconDisabledColor цвет для состояния disabled, общий на обе темы - берет значение из темы ($icon-disabled-color)

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

<template>
  <button
    class="zeen-action-icon"
    :class="{
      'zeen-action-icon_middle': size === 'middle',
      'zeen-action-icon_big': size === 'big',
      [`zeen-action-icon_theme-${theme}`]: theme,
    }"
    :id="`zeen-action-icon-${componentId}`"
    v-on="$listeners"
    v-bind="$attrs"
    :disabled="disabled"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'ZeenActionIcon',
  props: {
    size: {
      type: String,
      default: 'small',
      validator: (size) => ['small', 'middle', 'big'].includes(size),
    },
    theme: {
      type: String,
      default: 'default',
      validator: (theme) => ['default', 'dark', 'button'].includes(theme),
    },
    disabled: {
      type: Boolean,
      required: false,
    },
  },
  computed: {
    componentId() {
      return this._uid
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --action-icon-width: 12px;
  --action-icon-min-width-middle: 15px;
  --action-icon-min-width-large: 26px;
  --action-icon-button-size: 40px;
  --action-icon-button-radius: 50%;

  /* Цвета */
  --action-icon-color: var(--main-color);
  --action-icon-hover-color: var(--main-hover-color);
  --action-icon-focus-color: var(--main-hover-color);
  --action-icon-active-color: var(--main-active-color);
  --action-icon-disable-color: var(--main-disable-text-color);

  --action-icon-dark-color: var(--gray-1);
  --action-icon-dark-hover-color: var(--gray-2);
  --action-icon-dark-focus-color: var(--gray-2);
  --action-icon-dark-active-color: var(--gray-1);
  --action-icon-dark-disable-color: var(--gray-1);

  --action-icon-button-color: #f6f5f7;
  --action-icon-button-shadow: 0px 2px 7px rgba(116, 111, 135, 0.11);
}
</style>

<style lang="scss" scoped>
.zeen-action-icon {
  --action-icon-color-real: var(--action-icon-color);
  background-color: transparent;
  padding: 0;
  outline: none;
  border: 0;
  display: inline-flex;
  cursor: pointer;
  color: var(--action-icon-color-real);

  &:hover {
    --action-icon-color-real: var(--action-icon-hover-color);
  }

  &:focus {
    --action-icon-color-real: var(--action-icon-focus-color);
  }

  &:active {
    --action-icon-color-real: var(--action-icon-active-color);
  }

  &:disabled {
    cursor: auto;
    --action-icon-color-real: var(--action-icon-disable-color);
  }

  &_theme-dark {
    --action-icon-color-real: var(--action-icon-dark-color);
    &:hover {
      --action-icon-color-real: var(--action-icon-dark-hover-color);
    }
    &:focus {
      --action-icon-color-real: var(--action-icon-dark-focus-color);
    }
    &:active {
      --action-icon-color-real: var(--action-icon-dark-active-color);
    }
    &:disabled {
      --action-icon-color-real: var(--action-icon-dark-disable-color);
    }
  }

  svg {
    width: var(--action-icon-width);
    height: auto;
    fill: currentColor;
  }

  &_middle {
    svg {
      min-width: var(--action-icon-min-width-middle);
    }
  }

  &_big {
    svg {
      min-width: var(--action-icon-min-width-large);
    }
  }

  &_theme-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--action-icon-button-size);
    height: var(--action-icon-button-size);
    background: var(--action-icon-button-color);
    box-shadow: var(--action-icon-button-shadow);
    border-radius: var(--action-icon-button-radius);
  }
}
</style>

← ZeenButton →