c-navbar

Single file component navbar creado por Circulo Digital

Instalación

npm install c-navbar --save

Utilizando c-navbar

Importación

Para utilizar el c-navbar debe importarse en el componente donde será implementado, o registrado en main.js si se utilizarán diversas instancias en el proyecto

Improtación en componente

<script>
  @import cNavbar from 'c-navbar';
  
  export default {
    components: {
      cNavbar
    }
  }
</script>

Registro global

@import Vue from 'vue';
@import App from './App.vue';
@import cNavbar from 'c-navbar';

Vue.config.productionTip = false;
Vue.component('c-navbar', cNavbar);

new Vue({
  render: h => h(App),
}).$mount('#app');  

Implementación

Una vez importada en el componente o registrada globalmente, basta con utilizarla con la etiqueta <c-navbar></c-navbar>

<template>
  <c-navbar :items="items"></c-navbar>
</template>

Agregar items al navbar

Para agregar items al navbar se debe cargar un array de objetos al prop items, representando cada objeto un item del navbar (ejemplos al final de la sección) Cada objeto puede recibir las siguientes propiedades:

name

Nombre a renderizar en el template

• Tipo: String
• Requerido

type

Tipo de elemento a renderizar

• Tipo: String
• Valores admitidos:
  • 'router-link': Renderiza un componente <router-link></router-link>
  • 'external-link': Renderiza un elemento <a></a>
  • 'button': Renderiza un elemento <button></button>
  • 'submenu': Renderiza un elemento <ul></ul> con items interiores que se comporta como un submenu
  • 'collapse': Renderiza un elemento <ul></ul> con items interiores que se comporta como un menú colapsable
• Requerido

url

URL interna o externa a la aplicación a la que será redirigido el usuario al hacer click. Esta propiedad sólo surte efecto si type contiene los valores 'router-link' ó 'external-link'

• Tipo: String
• Requerido sólamente si type contiene los valores 'router-link' ó 'external-link'

function

Función que será ejecutada al hacer click en el item. Esta propiedad sólo surte efecto si type contiene el valor 'button'

• Tipo: Object
• Propiedades:
  • method: La función que será ejecutada. Debe recibir un sólo parámetro, si se requieren dos o más, trabajar con un Array o un Object.
  • parameters: Parámetros que recibirá la función si los requiriese, si es más de uno deberá enviarse un Array o un Object y armar el método en función de este formato
• Requerido sólamente si type contiene el valor 'button'

items

Array de objetos que representan items de un submenu o un collapse. Esta propiedad sólo surte efecto si type contiene los valores 'submenu' ó 'collapse'. Los objetos del array deben cumplir el formato de los items que recibe el navbar.

• Tipo: Array
• Requerido sólamente si type contiene los valores 'submenu' ó 'collapse'

customClassList

Array de strings con las clases customizadas que recibirá el elemento renderizado

• Tipo: Array
• Tipo de valor admitido: String

context

Contexto en el que se renderizará el item, siendo mobile cualquier ancho de pantalla menor al valor de collapseAt y desktop cualquier ancho mayor a ese valor (ver prop collapseAt). Si no se agrega esta propiedad, el elemento será renderizado en ambos contextos.

• Tipo: String
• Valores admitidos:
  • 'mobile': El item sera renderizado en cualquier ancho de pantalla menor al valor de collapseAt
  • 'desktop': El item sera renderizado en cualquier ancho de pantalla mayor al valor de collapseAt

Ejemplo

El siguiente ejemplo es del uso de un navbar con un item de cada tipo y con las siguiente especificaciones:

• El item router-link deberá tener una clase customizada
• El item external-link deberá tener dos clases customizadas
• Un item button con una función sin parámetro
• Un item button con una función con un parámetro
• Un item button con una función con múltiples parámetros
• El item submenu deberá ser renderizado únicamente en el contexto 'desktop' y contendrá dos items
• El item collapse deberá ser renderizado únicamente en el contexto 'mobile' y contendrá dos items

<template>
  <c-navbar :items=""><c-navbar>
</template>
<script>
  @import cNavbar from 'c-navbar';
  export default {
    components> {
      cNavbar
    },
    data() {
      return {
        items: [
          {
            name: 'Router link item'
            type: 'router-link',
            url: '/internal/url/path',
            customClassList: ['custom-class-1']
          },
          {
            name: 'External link item'
            type: 'external-link',
            url: 'external/url/path',
            customClassList: ['custom-class-1', 'custom-class-2']
          },
          {
            name: 'Button item'
            type: 'button',
            function: {
              method: () => {
                console.log('Función sin parámetro');
              }
            },
          },
          {
            name: 'Button item 2'
            type: 'button',
            function: {
              method: (param) => {
                console.log(param);
              },
              parameters: 'This is a parameter'
            },
          },
          {
            name: 'Button item 3'
            type: 'button',
            function: {
              method: (params) => {
                console.log(`param 1: ${params.param1}, param 2: ${params.param2}`);
              },
              parameters: {
                param1: 'param 1,
                param2: 'param 2,'
              }
            },
          },
        ]
      }
    }
  }
</script>