# c-navbar2

> Single file component navbar creado por Circulo Digital

Latest version **1.1.1** (published 2022-11-11) · 0 weekly downloads

## Install

```sh
npm install c-navbar2
pnpm add c-navbar2
yarn add c-navbar2
bun add c-navbar2
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-11-11 |
| First published | 2022-10-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 86.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | circulo |

## Links

- npm: https://www.npmjs.com/package/c-navbar2
- npm.io page: https://npm.io/package/c-navbar2

## Dependencies (3)

- [cross-env](https://npm.io/package/cross-env.md) ^7.0.2
- [commitizen](https://npm.io/package/commitizen.md) ^4.1.2
- [v-click-outside](https://npm.io/package/v-click-outside.md) ^2.1.3

## Recent versions

- 1.1.1 (latest) — 2022-11-11
- 1.1.0 — 2022-10-18
- 1.0.1 — 2022-10-17
- 1.0.0 — 2022-10-04

## README

# c-navbar
Single file component navbar creado por Circulo Digital

# Instalación
```
npm install c-navbar2 --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-navbar2';

  export default {
    components: {
      cNavbar
    }
  }
</script>
```

### Registro global
```
@import Vue from 'vue';
@import App from './App.vue';
@import cNavbar from 'c-navbar2';

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>`
  - `'nuxt-link'`: Renderiza un componente `<nuxt-link></nuxt-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>
```

---
_Source: https://npm.io/package/c-navbar2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._