@prodepa/banner-cookie-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Dependents (1)

Package Sidebar

Install

npm i @prodepa/banner-cookie-components

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

31.8 kB

Total Files

8

Last publish

Collaborators

  • ronaldjga