positiva-navigation-plugin

Possui componentes e logica do sistema de navegação de uma aplicação Positiva

Usage no npm install needed!

<script type="module">
  import positivaNavigationPlugin from 'https://cdn.skypack.dev/positiva-navigation-plugin';
</script>

README

positiva-navigation-plugin

Implementa um padrão de UX relacionado a navegação de uma aplicação @Positiva.

Tabela de conteúdo

  1. Motivação
  2. Dependências
  3. Como importar
  4. Como usar
  5. Autor
  6. Licença

Motivação

A navegação pela estrutura de uma aplicação ao ser definido se torna um padrão. Esse plugin implementa esse padrão, abstraindo ele do programador.

Dependências

npm i vuetify

Como importar

import PositivaNavigation from 'positiva-navigation-plugin';

Vue.use(PositivaNavigation);

Como usar

O plugin tem um component e alguns atributos globais

Componentes

<positiva-navigation></positiva-navigation>

productName

O nome do produto que será mostrado na barra lateral,

  • tipo String
  • obrigatório

links

  • tipo Array
  • obrigatório
{
    endpoint, // endpoint do link, por exemplo, /settings
    icon, // icone do link
    text, // texto que será mostrado no link e na barra superior
    hideToolbar, // opção aso nao queira mostrar a barra superior nesse link
    hide, // opção caso queira esconder o link
}

color

A cor de fundo da barra lateral (desktop) e barra inferior (mobile).

  • tipo String
  • padrão white

iconColor

A cor dos ícones dos links de navegação.

  • tipo String
  • padrão blue darken-3

textColor

A cor dos textos dos links de navegação.

  • tipo String
  • padrão white--text

Atributos

path

Endpoint atual

currentPage

O valor desse atributo será mostrado na barra superior, no canto esquerdo.

showReturnBtn

Caso verdadeiro, na barra superior mostrará um botão de voltar.

isMobileDevice

Diz se o dispositivo é mobile (true) ou desktop (false).

Autor

Renan Tashiro (renan.tashiro@positivatec.com)

Licença

AGPL-3.0