Zeen Component Library

# ZeenBurger

Компонент ZeenBurger

# Примеры:

Размеры:

ZeenBurger

zeen-burger-width

zeen-burger-height

Цвета:

# props

Название Тип Обязательный По умолчанию Описание
showMenu Boolean - false Кнопка открыть/закрыть
openSrc String - '' Путь до картинки в состоянии открыть
closeSrc String - '' Путь до картинки в состоянии закрыть

# emits

Название Описание
click-menu emit срабатывает при клике по кнопке

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

<template lang="pug">
  button.zeen-burger(
    @click="$emit('click-menu')"
    :class="{'zeen-burger_open': !showMenu, 'zeen-burger_close': showMenu}"
    ref="burger"
  )
</template>

<script>
export default {
  name: 'ZeenBurger',
  props: {
    showMenu: {
      type: Boolean,
      default: false,
    },
    openSrc: {
      type: String,
      default: '',
    },
    closeSrc: {
      type: String,
      default: '',
    },
  },
  mounted() {
    if (this.openSrc) {
      this.$refs.burger.style.setProperty('--zeen-burger-background-image-open', `url("${this.openSrc}")`)
    }
    if (this.closeSrc) {
      this.$refs.burger.style.setProperty('--zeen-burger-background-image-close', `url("${this.closeSrc}")`)
    }
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --zeen-burger-width: 27px;
  --zeen-burger-height: 18px;

  /* Цвета */
  --zeen-burger-background: transparent;
  --zeen-burger-background-image-open: none;
  --zeen-burger-background-image-close: none;
}
</style>

<style scoped lang="scss">
.zeen-burger {
  width: var(--zeen-burger-width);
  height: var(--zeen-burger-height);
  background: var(--zeen-burger-background);
  background-repeat: no-repeat;
  background-size: contain;
  outline: none;
  border: 0;
  cursor: pointer;
  transition: 0.2s;

  &_open {
    background-image: var(--zeen-burger-background-image-open);
  }

  &_close {
    background-image: var(--zeen-burger-background-image-close);
  }
}
</style>

← ZeenScheduleCard →