Criando speedDial usando css
Criando speedDial usando css e Javascript.
Introdução
Criando speedDial usando css, neste tutorial irei demonstrar como criar um componente do estilo SpeedDial usando apenas css e o javscript para animar o componente.
O que é o SpeedDial
O SpeedDial nada mais é que um componente estilizado criado para representar uma simples lista de links, cujo objetivo é facilitar a exibição de links de forma ordenada em determinadas direções.
Existem várias formas de se apresentar um speeddial, sendo elas de forma linear vertical , linear horizontal, circular e semicircular.
Neste tutorial irei demonstrar a forma o speeddial no formato linear vertical, listando os itens um abaixo do outro.
Criando speedDial usando css
Vamos implementar o nosso componente, a primeira ação que devemos executar é a criação da estrutura da página e a estrutura do speeddial .
Logo abaixo mostro o código que utilizei para criar a estrutura do nosso projeto.
Você pode verificar que criei o corpo da página e adicionei uma tag que contem o título da nossa página e em seguida o botão responsável por exibir os links do nosso componente (speeddial).
Para agrupar os links do speeddial utilizei a tags (ul e li) contendo os links.
Já para criar os ícones utilizei a lib ionicons, você pode verificar no final da estrutura da página que adicionei os links de importação do ionicons.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>SpeedDial</title> </head> <body> <div class="container"> <h2 class="title">SpeedDial</h2> <div class="speeddial"> <button type="button" class="speeddial-button"> <ion-icon name="add"></ion-icon> </button> <ul class="speeddial-list"> <li class="speeddial-item" style="transition-delay: 120ms;"> <a class="speeddial-action" href="#"> <ion-icon name="home-outline"></ion-icon> </a> </li> <li class="speeddial-item" style="transition-delay: 90ms;"> <a class="speeddial-action" href="#"> <ion-icon name="flash"></ion-icon> </a> </li> <li class="speeddial-item" style="transition-delay: 60ms;"> <a class="speeddial-action" href="#"> <ion-icon name="bulb-outline"></ion-icon> </a> </li> <li class="speeddial-item" style="transition-delay: 30ms;"> <a class="speeddial-action" href="#"> <ion-icon name="flash-outline"></ion-icon> </a> </li> <li class="speeddial-item" style="transition-delay: 0ms;"> <a class="speeddial-action" href="#"> <ion-icon name="flash-outline"></ion-icon> </a> </li> </ul> </div> </div> <script src="main.js"></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </body> </html>
Após terminarmos a implementação da estrutura do componente, vamos adicionar estilo para ele, logo abaixo mostro todo o código utilizado para estilização do nosso componente.
*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #333867;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.title {
padding: 0.8rem;
border-radius: 6px;
background: #17193b;
text-align: center;
color: orange;
font-weight: 900;
font-size: 24px;
}
.speeddial {
align-items: center;
flex-direction: column;
display: flex;
z-index: 2;
}
.speeddial-button {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: #2196f3;
color: #fff;
border-radius: 50%;
font-size: 50px;
transition: 0.3s all ease-in-out;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.speeddial-button:active {
background-color: orange;
transform: scale(0.9);
transition: all 0.3s ease-in-out;
}
.speeddial-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: top 0s linear 0.2s;
pointer-events: none;
}
.speeddial-item {
transform: scale(0);
opacity: 0;
margin: 0.25rem 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
will-change: transform;
}
.speeddial-action {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
overflow: hidden;
background: #495057;
color: #fff;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.speeddial-opened .speeddial-list {
pointer-events: auto;
}
.speeddial-opened .speeddial-item {
transform: scale(1);
opacity: 1;
}
.speeddial-opened .speeddial-button {
transform: rotate(45deg);
}
Pronto agora vamos para animação do nosso componente, conforme a estrutura que criamos vamos adicionar uma ação para o botão do speeddial.
Logo abaixo mostro como ficou o nosso código em javascript, que adiciona funcionalidade para o botão do speeddial.
const speedDial = document.querySelector(".speeddial");
const speedDialButton = document.querySelector(".speeddial-button");
speedDialButton.onclick = function (e) {
e.preventDefault();
speedDial.classList.toggle("speeddial-opened");
};
Explicando o código acima, no código acima estou obtendo a referência do speeddial e do botão do speeddial e armazenando na variáveis (speedDial e speedDialButton ).
Logo após adiciono no listener de (click) do botão a funcionalidade para alternar a ação de abrir e fechar o speeddial.
No final será gerado um componente conforme a figura abaixo:
Segue abaixo o link do vídeo com a animação do componente :
Vídeo Tutorial:
Código fonte do tutorial:
