amaya-components v0.0.1

Amaya Components

Компоненты

Использование компонета Menu.vue.

1. Menu.vue содержит в себе два слота primary и secondary
2. Menu.vue также содержит логотип img, который содержит props - logo. Если мы передаем параметр true, то логотип будет добавлен в наш компонент, в противном случае его не будет. По умолчанию false

<template>
  <nav class="menu">
    <div class="menu__logo">
      <img src="" alt="logo" class="menu__logo-img" v-show="logo" />
      <slot name="primary"> </slot>
    </div>

    <slot name="secondary"></slot>
  </nav>
</template>

Использование компонета MenuButton.vue.

1. MenuButton.vue - компонент обычной кнопки, содержит в себе slot
2. Также можете передавать определенные классы в кнопку и в зависимости от класса будет зависит UI кнопки. На данный момент присутствует 2 класса - .btn и .danger

<template>
  <button class="btn">
    <slot name="title"></slot>
  </button>
</template>

Использование компонета IconBtn.vue.

1. IconBtn.vue - компонент кнопки с икнонакми.

2. IconBtn.vue - Принимает в себя 2 props'a - title и className 1.1 title - принимает в себя строку и будет отоброжать логическое описание кнопки при наведении 1.2 className - принимает в себя строку, точнее атрибут name иконки и в зависимости от аттрибута будет отображаться та или иная иконка

3. IconBtn.vue - содержит библиотеку иконок ionic все иконки можете использовать из данной библиотеки 1.1 Важно - при вствки иконки в проект, перед скопированным атрибутом name добовляйте приствку io, иначе иконки не будут отоброжаться. Пример:

      <IconBtn :className="'io-list-sharp'" title="Сторы" />

<template>
  <button class="btn" :title="title">
    <v-icon :name="className" class="btn__icon" />
  </button>
</template>

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    className: {
      required: true,
      type: String
    },
    title: {
      required: false,
      type: String
    }
  }
})