plantilla-share

En construccion

Plantilla administrativa

Instalacion

Para instalarla ejecutar

npm install plantilla-share

Importarla:

import Sidebar from 'plantilla-share/src/lib-components/Sidebar'
import Navbar from 'plantilla-share/src/lib-components/Navbar'
import CardPrimary from 'plantilla-share/src/lib-components/CardPrimary'
import CardSecondary from 'plantilla-share/src/lib-components/CardSecondary'
import Dashboard from 'plantilla-share/src/lib-components/Dashboard'

Uso

Sidebar

props posibles: TITLE: es el titulo del sidebar

ARMADO DE MENUS: recibe un objeto de arrays asociativos donde va armando los elementos del sidebar ejemplo: En el data del componente vue, podriamos armarlo

        data(){
            return{
                menus:[
                {
                    path:"inicio",
                    iconoClass:"fa fa-home",
                    nameLink:"Cliente"
                },
                {
                    path:"inicio2",
                    iconoClass:"fa fa-home",
                    nameLink:"Cliente"
                }
            ]
            }
        },

    tambien es posible añadirle botones al menú, mediante la etiqueta slot con el name "newRoutes".
    Ejemplo:
    <Sidebar title="Su Menú" :menu="menus" />
        <template slot="newRoutes">
            <li class="nav-item">
                <a class="nav-link" @click="logout">  
                    <i class="fa fa-home"></i>                   
                    <span>Logout</span>
                </a>
            </li>
            <li class="nav-item">
                <span class="nav-link collapsible"><i class="fa fa-home"></i> Example expand </span>
                <div class="expanded hidden ml-2">
                    <li class="nav-item">
                        <a href="#" class="nav-link text-dark a">
                            <i class="fa fa-home"></i> Example 1
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link text-dark a">
                            <i class="fa fa-home"></i> Example 2
                        </a>
                    </li>
                </div>                         
            </li>
        </template>
    </Sidebar>

Navbar

<Navbar />

Agregar mas items al navbar:

<Navbar>
    <template slot="items">
        <li class="nav-item border-right dropdown notifications">
            <a class="nav-link nav-link-icon text-center" role="button" id="alertas" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <div class="nav-link-icon__wrapper" title="Tienes mensajes del sistema.">
                    <i class="fa fa-envelope text-danger"></i>
                </div>
            </a>
            <div class="dropdown-menu dropdown-menu-small" aria-labelledby="alertas">
                <div class="px-4 py-2">
                    <p><i class="fa fa-exclamation-circle"></i>ejemplo</p>
                    <p><i class="fa fa-exclamation-circle"></i>ejemplo</p>
                </div>
            </div>
        </li>
    </template>
</Navbar>

Cards

Props:{
    title: String
    addBtn: {
        route: "Home"
        type: "path"
    }
} 

<CardPrimary>
    <template slot="container">
    </template>
</CardPrimary>


props:{
        title: String,
        classCuerpo: String,
        classCard: String
    }
<CardSecondary>
    <template slot="cuerpo">
    </template>
</CardSecondary>

Dash

    <Dash :title1="{name:'Clients'}" title2="34" :span="%5" />

Datos de versiones

*1.1.9 Se corrigio sidebar, se oculta al hacer click fuera.

*1.2.0 Se agrego button en card primary. Ahora podes crear router-link y button, este ultimo devuelve un evento "click".

*1.2.1 Se saco el atributo lang=ts del archivo "Navbar.vue".

*1.2.2 Se modifico el evento emit "click" a "btnclick" de CardPrimary.vue para cuando se pasa la prop :addbtn="{type: 'button'}".

*1.2.3 Se arreglo error en Sidebar