Introdução
O botão flutuante pode ter alguns casos de uso, como por exemplo botão de compartilhamento em redes sociais, ou então quando o usuário está utilizando o sistema por um celular.
Porém é possível adaptar facilmente para qualquer sistema web, ou então adaptar em outros casos.
Para isto vou utilizar a biblioteca vue-float-action-button.
Esta biblioteca já traz pronto para uso esse botão flutuante, ela tem algumas configurações que podem ser realizadas para personalizar.
Vou mostrar nesse artigo como personalizar alguns itens.
Instalação
É possível instalar a biblioteca via NPM ou Yarn, com os comandos:
npm install vue-float-action-button
ou
yarn add vue-float-action-button
Depois de instalar, é necessário ir no main.js e adicionar a importação da biblioteca, dessa forma:
//main.js
//... outros imports
import VueFab from "vue-float-action-button"
Vue.use(VueFab);
//... criação da instancia Vue
Além disso, é preciso configurar a fonte do material icons, que é utilizada pela biblioteca.
No index.html, faça a importação antes do fechamento do <head>:
<!-- index.html -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/iconfamily=Material+Icons"
/>
Com isso a biblioteca já está configurada corretamente para uso.
Renderização por lista
Há basicamente duas formas de renderizar o botão.
A primeira delas é com uma lista de todos os botões de ação que irão aparecer dentro do botão principal.
Essa lista é declarada dentro do retorno do data, uma lista de objetos com a configuração de cada item.
E no template de renderização, utiliza o v-for para percorrer todos os itens, passando cada atributo para a prop utilizada na biblioteca.
<!-- App.vue -->
<fab-item
v-for="(item, key) in menu"
:key="key"
:title="item.title"
:color="item.color"
:icon="item.icon"
:idx="key"
></fab-item>
//App.vue
<script>
export default {
name: 'App',
data() {
return {
menu: [
{
icon: "mode_edit",
title: "Editar",
color: "#FF9900"
},
{
icon: "archive",
title: "Arquivar",
color: "#FF9900"
}
]
}
},
}
</script>
Com esse código, o resultado já é esse:
Renderização por HTML
A outra forma de renderização, é através do template, definindo cada item com uma tag.
A vantagem de fazer dessa forma é a facilidade em criar funções para cada botão separadamente.
No exemplo mostrado, há três botões, cada um tem uma ação diferente, se colocar uma função de click só na renderização, provavelmente precisará ter um condicional para separar as funções.
Dessa outra forma, não é necessário ter nada no data, e fica:
<!-- App.vue -->
<vue-fab>
<fab-item
:idx="0"
title="Editar"
color="#FF9900"
icon="mode_edit"
@clickItem="edit"
></fab-item>
<fab-item
:idx="1"
title="Arquivar"
color="#FF9900"
icon="archive"
@clickItem="archive"
></fab-item>
<fab-item
:idx="2"
title="Deletar"
color="#FF9900"
icon="delete"
@clickItem="delete"
></fab-item>
</vue-fab>
Esse código traz o mesmo resultado que o anterior.
Porém repare que agora cada botão tem um evento clickItem.
Cada item que for clicado, pode chamar facilmente uma função diferente, essas funções podem ser declarado no methods do script:
//App.vue
methods: {
edit() {
console.log("edit")
},
archive() {
console.log("archive")
},
delete() {
console.log("delete")
}
}
Trocar lado do botão
No caso, a configuração padrão deixa o botão no canto inferior direito da tela, podemos personalizar este comportamento.
Para fazer isso, é preciso sobrescrever o estilo padrão aplicado na classe .fab-main-container.
<style>
.fab-main-container {
right: 80% !important;
}
</style>
É preciso colocar o !important para sobrescrever corretamente e aplicar o posicionamento desejado, essa configuração faz o botão ir para o outro lado da tela.
Configurar tamanho do botão flutuante
O componente tem basicamente duas tags, e em cada uma delas é possível passar algumas propriedades, uma delas é a propriedade size para o <vue-fab>.
São três tipos de tamanho, o big, normal (padrão) e o small.
<!-- App.vue -->
<vue-fab size="big">
<fab-item
:idx="0"
title="Editar"
color="#FF9900"
icon="mode_edit"
@clickItem="edit"
></fab-item>
<fab-item
:idx="1"
title="Arquivar"
color="#FF9900"
icon="archive"
@clickItem="archive"
></fab-item>
<fab-item
:idx="2"
title="Deletar"
color="#FF9900"
icon="delete"
></fab-item>
</vue-fab>
Não da para perceber muito a diferença, mas os botões ficam maiores e mais grudados uns nos outros.
Configurando como small:
Configurar a direção de abertura do botão flutuante
Ao clicar no botão principal, os itens são abertos para cima.
Este comportamento é bom, quando o botão está na parte de baixo da tela.
Porém se o botão estiver no topo, os itens não aparecerão. Por isso é possível configurar se vai aparecer para cima ou para baixo.
Primeiramente vou colocar o botão pra cima, adicionando mais um estilo na classe .fab-main-container.
<style>
.fab-main-container {
right: 80% !important;
bottom: 80% !important;
}
</style>
Com isso o botão ficará acima.
E para configurar a direção de abertura, é necessário passar para o <vue-fab> a propriedade unfoldDirection.
O padrão de abertura é up, que é para cima.
Porém é possível configurar como down, para abrir para baixo.
<vue-fab mainBtnColor="green" unfoldDirection="down">
<fab-item
:idx="0"
title="Editar"
color="#FF9900"
icon="mode_edit"
@clickItem="edit"
></fab-item>
<fab-item
:idx="1"
title="Arquivar"
color="#FF9900"
icon="archive"
@clickItem="archive"
></fab-item>
<fab-item
:idx="2"
title="Deletar"
color="#FF9900"
icon="delete"
></fab-item>
</vue-fab>
Vídeo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Conclusão
O botão flutuante pode ser utilizado em alguns casos, porém esta biblioteca fornece muitas opções de variação, e isso faz com que este botão flutuante seja adaptável para outras ocasiões.
Recomendo dar uma olhada na biblioteca e ver mais algumas possibilidades caso precise.
Até o próximo post 🙂
Referências
https://www.npmjs.com/package/vue-float-action-button