newsletter-wap

Newsletter

Sobre

Um componente padrão para a newsletter com os campos de nome e e-mail.

---

Dependências

Componentes

Prop	Descrição	Instalação	Documentação
Loader 1.3.1	Um componente que contém um loader padrão em formato de círculo.	npm install @wapstore/loader	Acesse aqui

---

Instalação

• Instale o app através do seu terminal

npm install @wapstore/newsletter

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/newsletter": "^1.3.1"
}

Agora a loja está apta para o uso da aplicação.

---

Uso

O componente de Newsletter pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

---

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para uma Newsletter na Home:

<template>
  <newsletter placeholderNome="Seu nome" placeholderEmail="Seu melhor e-mail" txtBt="CADASTRAR" class="newsletter">
    <template #newstext>
      <h5>Acompanhe a Loja</h5>
      <p>Cadastre-se e seja um dos primeiros a receber novidades e ofertas.</p>
    </template>
  </newsletter>
</template>

<script>
  ...
</script>
<style>
  ...
</style>

---

Recursos

Props

Prop	Descrição	Tipo	Valor padrão
placeholderNome 1.3.1	Texto placeholder do campo de nome.	String	Nome
placeholderEmail 1.3.1	Texto placeholder do campo de E-mail.	String	E-mail
txtBt 1.3.1	Texto do botão enviar.	String	Enviar

Slots

Slot	Descrição	Name	Exemplo de uso
newstext 1.3.1	Campo para alteração do texto exibido na newsletter.	newstext	<newsletter><template #newstext>Texto exemplo</template></newsletter>
newsIcon 1.3.1	Campo para adição de um ícone na newsletter.	newsIcon	<newsletter><template #newsIcon><img src="icone.svg" alt="icone"></template></newsletter>

---

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.