# amaya-components

> ---

Latest version **0.0.1** (published 2023-03-26) · 0 weekly downloads

## Install

```sh
npm install amaya-components
pnpm add amaya-components
yarn add amaya-components
bun add amaya-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-03-26 |
| First published | 2023-03-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 158.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ismai100104 |

## Links

- npm: https://www.npmjs.com/package/amaya-components
- npm.io page: https://npm.io/package/amaya-components

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [oh-vue-icons](https://npm.io/package/oh-vue-icons.md) ^1.0.0-rc3

## Recent versions

- 0.0.1 (latest) — 2023-03-26

## README

# Amaya Components

---

## Компоненты

---

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

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

```html
<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**

```html
<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](https://ionic.io/ionicons)** все иконки можете использовать из данной библиотеки 
   1.1 **Важно** - при вствки иконки в проект, перед скопированным атрибутом **name** добовляйте приствку **io**, иначе иконки не будут отоброжаться. **Пример:**

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

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

```javascript
import { defineComponent } from 'vue';

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

```

---
_Source: https://npm.io/package/amaya-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._