newsletter-wap v1.0.0
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.
1 year ago