Criando componente snackbar com JavaScript e CSS

O componente de snackbar é um dos mais utilizados no Front-end. Com ele, nós desenvolvedores, podemos enviar informações importantes aos usuários. É uma forma elegante de avisar, por exemplo, que o usuário enviou corretamente as informações a um formulário, ou, até mesmo, avisos sobre o cadastro. Nesse artigo vou ensinar de forma simples, como você pode criar seu próprio snackbar.

Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos Conhecer o curso

Iniciando o componente de snackbar

Primeiramente, você precisa de uma estrutura, você precisará criar o HTML, após essa estrutura, vamos a estilização e criação dos eventos com JavaScript. Para esse exemplo, vou criar um botão, ele será o gatilho que irá disparar o evento que mostrará o componente snackbar. Vou criar o componente apenas com um campo para texto.

<section>
	<button id="snackbar-trigger">
		Clique Aqui
	</button>

	<div id="snackbar">
		<p>
			Mensagem ao usuário!
		</p>
	</div>
</section>

Essa estrutura foi criada já pensando em como capturar esses elementos no JavaScript, esse é o motivo pelo qual já adicionei os id’s em cada um dos elementos.

Estilizando o elemento

Agora que temos a estrutura básica em HTML, vamos estilizá-la para criar um visual atraente para nosso snackbar. Aqui está um exemplo básico de estilo. Lembrando que a estilização vai de projeto para projeto, essa parte você é livre para deixar o componente de snackbar do jeito que achar melhor.

#snackbar {
	visibility: hidden;
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 1;
	transform: translateX(-50%);

	min-width: 250px;
	background-color: #29ad65;
	box-shadow: 4px 4px 6px 4px #00000059;
	color: #fff;
	text-align: center;
	font-size: 17px;
	border-radius: 2px;
	padding: 5px 10px;

}

#snackbar.show {
	visibility: visible;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}

	to {
		bottom: 20px;
		opacity: 1;
	}
}

@keyframes fadeout {
	from {
		bottom: 20px;
		opacity: 1;
	}

	to {
		bottom: 0;
		opacity: 0;
	}
}

Curso HTML5 + CSS3 - Fundamentos Conhecer o curso

Vamos entender melhor o que está acontecendo aqui. Inicialmente, o componente de snackbar precisa ficar escondido, por isso, é usada a propriedade visibility: hidden;, pois, só queremos mostrá-lo quando o botão for clicado.

As propriedades position, bottom, left e transform servem para que o elemento permaneça sempre ao centro da tela na parte inferior. Um ponto aqui é que você pode, caso haja necessidade, deixar o componente de snackbar onde preferir. Movendo apenas conforme o necessário.

Caso queira ter o domínio completo dos tipos de position e como controlá-los, no curso HTML5 + CSS3 - Box model e Posicionamento de Elementos eu mostro em detalhes como fazer.

Após isso, coloquei uma largura fixa e alterei a cor de fundo, cor de texto, tamanho do texto, posicionamento, preenchimento interno e arredondei as bordas. Novamente, essas estilizações não impactam no comportamento do componente, servem apenas para deixar com um visual mais agradável.

Estilizado da forma como eu queria, basta alterar a visibilidade do elemento quando ele possuir a classe show. Essa classe irá trocar a visibilidade e adicionar uma animação que fará com que o componente de snackbar apareça e saia de uma forma suave.

Adicionando comportamento com JavaScript

Agora, vamos adicionar a lógica em JavaScript para fazer o snackbar aparecer quando o botão for clicado:

const trigger = document.getElementById("snackbar-trigger");
trigger.addEventListener('click', function () {
	var snackbar = document.getElementById("snackbar");
	snackbar.className = "show";
	setTimeout(function () { snackbar.className = snackbar.className.replace("show", ""); }, 3000);
});

Este código JavaScript seleciona o botão pelo seu ID e adiciona um evento de clique. Quando o botão é clicado, ele adiciona a classe “show” ao snackbar, fazendo com que ele apareça. Lembrando que, quando ele aparecer, o componente irá iniciar a animação que fizemos com CSS. Em seguida, é utilizada a função setTimeout para remover a classe “show” após 3 segundos, fazendo com que o snackbar desapareça.

Com isso, agora você tem um snackbar básico funcionando em sua página. Claro, você pode personalizar o estilo e o comportamento conforme necessário para atender às suas necessidades específicas. Caso você tenha seguido o passo a passo, terá algo parecido com isso:

Curso HTML5 + CSS3 - Construindo sites semânticos Conhecer o curso

Conclusão

Em resumo, o snackbar aparece como um dos componentes mais utilizados no Front-end, oferecendo aos desenvolvedores uma maneira elegante de comunicar informações cruciais aos usuários. Neste artigo, iniciamos com a criação da estrutura HTML e sua estilização, e adicionamos o comportamento dinâmico com JavaScript.

Esta abordagem simplificada proporciona não apenas a compreensão do processo de criação do snackbar, mas também a flexibilidade para personalizar conforme as exigências específicas do projeto. Assim, o desenvolvedor tem a habilidade de integrar de maneira eficaz esse componente fundamental em suas interfaces web, aprimorando a experiência do usuário de forma eficiente e agradável.