Rncb-component-lib NPM

rncb-component-lib

How to use

Install

// npm install
npm install rncb-component-lib

AppHeader

import into a single component.

import { AppHeader } from 'rncb-component-lib';
<template>
  <div>
    <app-header/>
  </div>
</template>
<script>
export default {
    components: {AppHeader}
}
</script>

alt text

Options

isBasketEmpty
- условие для навешивания класса 'header__basket_not-empty'
- default: true
logoCallback
- для роутинга, передавать $router.push
- default: () => '/'
basketCallback
- для роутинга, передавать $router.push
- default: () => '/cart'

AppFooter

import into a single component.

import { AppFooter } from 'rncb-component-lib';
<template>
  <div>
    <app-footer/>
  </div>
</template>
<script>
export default {
    components: {AppFooter}
}
</script>

alt text

Options

address
- адрес
- default: '\295000, г. Симферополь,\\ул. Набережная им. 60-летия СССР, д. 34\'
downloadAppHref
- ссылка на скачивание
- default: '#'
vkHref
- ссылка на ресурс
- default: '#'
youtubeHref
- ссылка на ресурс
- default: '#'
twitterHref
- ссылка на ресурс
- default: '#'
okHref
- ссылка на ресурс
- default: '#'

BreadcrumbLink

import as global component.

// import BreadcrumbLink
import { BreadcrumbLink } from 'rncb-component-lib';
Vue.component('BreadcrumbLink', BreadcrumbLink);
new Vue({
	// ...
})

import into a single component.

// import BreadcrumbLink
import { BreadcrumbLink } from 'rncb-component-lib';
<template>
  <div>
    <breadcrumb-link 
      text="Каталог" 
      @breadcrumbCallback="$router.push"
    />
  </div>
</template>
<script>
export default {
    // declare BreadcrumbLink
    components: {BreadcrumbLink}
}
</script>

alt text

Options

text
- текст ссылки
- default: 'Назад'

MainButton

import into a single component.

import { MainButton } from 'rncb-component-lib';
<template>
  <div>
    <main-button :text="btnText"/>
  </div>
</template>
<script>
export default {
    components: {MainButton},
    data(): {
      return {
        btnText: 'Сохранить'
      }
    }
}
</script>

alt text

Options

text
- текст на кнопке
- default: 'Отправить'
type
- тип кнопки
- default: 'submit'

FiltersItem

import into a single component.

import { FiltersItem } from 'rncb-component-lib';
<template>
  <div>
    <filters-item
        isBordered
        filterName="Металл"
        inputName="material"
        :filters="materialFilters"
        :checkedFilterItems="checkedFilterItems"
        @onChange="() => {}"
        :isDisabled="false"
    />
  </div>
</template>
<script>
export default {
    components: {FiltersItem},
    data() {
    return {
      materialFilters: [
        {
          id: 1,
          priority: 0,
          title: 'Золото'
        },
        {
          id: 2,
          priority: 0,
          title: 'Медно-никелевый сплав'
        },
        {
          id: 3,
          priority: 0,
          title: 'Серебро'
        }
      ],
      checkedFilterItems: [1,3]
    }
  }
}
</script>

alt text