top of page
  • Bad Drow

Rótulos flutuantes em input texts no wix

Atualizado: 11 de dez. de 2020


Sabe do que estou falando?


Você sabe exatamente do que se trata o título deste post? Se não, não se preocupe, abaixo você pode ver um exemplo do que é um rótulo flutuante. Experimente clicar em um cos campos (username ou password), veja como o placeholder do campo sobe e diminui de tamanho.

Legal demais este efeito 👍, você já pensou em algo assim no seu site Wix? Se sim e já percorreu as opções que eles tem, viu que nativamente isto não é possível, mas cá estou para compartilhar com você uma solução.


Conhecendo a solução 🧐


Abaixo você pode ver uma função chamada floatLabel( ), adequada para ser chamada em eventos de onKeypress( ). Ela recebe três parâmetros : rotulo, input e placeholder. O primeiro é o componet text que serve como label, o segundo é a caixa de texto onde ocorre o efeito, o terceiro é o texto escrito no rótulo. Você vai entender isso melhor mais tarde, apenas observe que a lógica toda ocorre entre as linhas 24 e 30.



abaixo você pode ver como essa função é chamada. Neste caso, o campo #labelNome nome é um text, #tbNome é um input e "nome" é o que aparecerá escrito em #labelNome.



Para que fique mais claro, veja a estrutura abaixo e identifique os elementos acima. A marcação amarela indica o componente #labelNome.


Marcando o rórulo

Por fim, é importante que você configure a animação de deslizar para cima, desmarque nela a opção de executar somente na primeira vez e reduza ao máximo o tempo de execução e atraso.



Configurando animação

Assista o vídeo!




😎😊




120 visualizações1 comentário

Posts recentes

Ver tudo
bottom of page