components-rtlsas

components

Instalar/Actualizar componentes en proyecto vue

yarn add components-vue-rtlsas@latest --save

Crear bus de eventos

Los componentes manejan bus de eventos, siempre se debe crear

#Archivo eventBus.js

const EB = {}

EB.install = Vue => {
  Vue.prototype.$bus = new Vue()
}

export default EB

En main.js importar bus de eventos

import EventBus from '@/plugins/eventBus'
Vue.use(EventBus)

En main.js importar componentes

import infobar from 'components-vue-rtlsas/src/components/InfoBar'
import sidebar from 'components-vue-rtlsas/src/components/Sidebar'
import titlestatusbar from 'components-vue-rtlsas/src/components/TitleStatusBar'

Vue.component('infobar', infobar)
Vue.component('sidebar', sidebar)
Vue.component('titlestatusbar', titlestatusbar)

Uso Infobar

<infobar :show-section="true" section="Test" :image="require('@/assets/images/logo.png')"></infobar>
show-section: Boolean, mostrar título sección
section: String, Título de la sección
image: String, Logo a utilizar

Uso TitleStatusbar

<titlestatusbar first-title="Dashboard" second-title="Test controles y mantenimiento" icon="mdi-file-text"></titlestatusbar>
first-title: String, Título enfatizado
second-title: String, Título más pequeño
icon: String, clase del icono que se utilizará
alert-img: String, Ruta de imagen que se utilizará al mostrar alertas de status
background-color: String, Hexadecimal del color del background
show-alert: Boolean, Define si se muestra o no la alerta

Uso Sidebar

<sidebar title="MENU" :items="[{name: 'Agentes', icon:'mdi-close', link:'/'}]" :height-less="130"></sidebar>
title: String, Título del sidebar
items: Array of objects, Define cada uno de los items, cada objeto debe llevar, name, icon, link
background: String, ruta de imagen a colocar en background
height-less: Number, medida en pixeles que se le restará al heigth 100% (depende si tiene más elementos o es solo el menú)