@prodepa/banner-cookie-components

Banner Cookie Components

Propósito

"Banner Cookie Components" foi desenvolvido com o propósito de padronizar e reutilizar codigos a fins de acelerar a produção de novos softwares. Suas funcionalidasdes são baseadas em banners para a exibição de cookies.

Instalação

Para adicionar "Banner Cookie Components" ao seu projeto, é necessário ter instalado um gerenciador de pacotes, como NPM, PNPM ou Yarn. Após isso, apenas execute o comando de instalação do componente usando:

npm install @prodepa/banner-cookie-components

ou

pnpm install @prodepa/banner-cookie-components

ou

yarn add @prodepa/banner-cookie-components

Exemplos

Utilização rápida

Para a utilização do componente de maneira rápida, seguindo os estilos pré-estabelecidos e passíveis de alteração, use este código:

<BannerCookie
   dialog-name="mainBannerCookie"
   :is-open="true"
>
   <div></div>
   <div>
      <button>botão 1</button>
      <button>botão 2</button>
      <button>botão 3</button>
   </div>
</BannerCookie>

Props

O componente "Banner-cookie" é administrado através de propriedades passadas como valores em atributos, sendo esses atributos:

• dialogName:
  • Type: String;
  • Funcionalidade: Identificação unica do componente;
• isOpen:
  • Type: Boolean;
  • Funcionalidade: Variação de estado do componente;
• escClose:
  • Type: Boolean;
  • Funcionalidade: Habilitar o fechamento do banner atrávez de um emit;
  • Emit: emits('escCloseAction', !isOpen);
  • Execução: <BannerCookie @escCloseAction=(newValue) => isOpen = newValue></BannerCookie>
• seamless:
  • Type: Boolean;
  • Funcionalidade: Habilita o travamento da rolagem de tela;;
• backdrop:
  • Type: Boolean;
  • Funcionalidade: Ativa a exibição de um plano de fundo escuro;
  • Emit: emits('backdropClick', !isOpen);
  • Execução: <BannerCookie @backdrop-click=(newValue) => isOpen = newValue></BannerCookie>
• variants:
  • Type: String;
    • "primary": Alinhado a parte de baixo com largura de 95% da tela com orientação interna na horizontal;
    • "secondary": Banner alinhado ao centro da tela com orientação interna na vertical;
  • Default: "primary";
  • Observação: Todos os estilos conseguem ser alterados e estão livres para personalização pessoal;

Licensa

Banner Cookie Components possui a licença MIT