components-rtlsas
v0.1.21
Published
# Instalar/Actualizar componentes en proyecto vue ```` yarn add components-vue-rtlsas@latest --save ````
Downloads
66
Readme
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ú)