Este artigo ilustra o uso de foco, foco e outros estados com propriedades de posição no Tailwind.
Como usar Hover, Focus e outros estados com propriedade Position no Tailwind?
O foco, o foco e outros estados no Tailwind são usados para estilizar elementos no Tailwind, apresentando uma interface atraente e amigável e uma experiência envolvente para os usuários. Às vezes, a propriedade da posição deve ser aplicada para manter a experiência nos mais altos padrões.
Método 1: usando a variante Hover com propriedade de posição
A variante instantânea é usada para estilizar os elementos selecionados quando o usuário move o cursor sobre o elemento selecionado. O ' posição ”o atributo pode ser usado em conjunto com“ flutuar ”Para definir a posição antes e depois do foco. Este par é usado para criar uma experiência envolvente para o usuário.
Etapa 1: adicionar a propriedade Hover com posição em HTML
No código abaixo, a propriedade hover é aplicada junto com a propriedade position em “ botão ' elemento:
< corpo >
< botão aula = 'relativo w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< p aula = 'texto-branco texto-centro' > Passe o mouse sobre mim < / p >
< / botão >
< / corpo >
Neste código:
- O ' relativo ”classe define o botão em relação à página pai.
- “ w-40 ”define a largura para 40px.
- “ h-12 ”define a altura para 12px.
- “ bg-azul-500 ”define a cor de fundo para azul.
- “ pairar: absoluto ”altera a posição relativa do botão para absoluta quando o cursor do mouse se move sobre ele.
- “ pairar: traduzir-x-4 ”move o botão 4px para a direita no eixo x e ao mesmo tempo 4px para baixo em“ pairar: traduzir-y-4 ”.
- O texto está alinhado ao centro por “ centro de texto ”.
Etapa 2: verificação
Visualize a página da web criada pelo código acima, que se parece com isto:
A saída mostra que o elemento foi movido para a direita e para baixo em 4px.
Método 2: usando variante de foco com propriedade de posição
A variante focus é usada para estilizar elementos HTML para chamar a atenção do usuário e dar ênfase a alguns elementos. A posição também pode ser aplicada em conjunto para posicionar o objeto em relação ou de forma absoluta à página pai. Isso é feito para manter o usuário engajado.
Etapa 1: adicionar a propriedade Focus com posição em HTML
Crie um arquivo HTML e aplique a propriedade focus com uma posição adequada. Por exemplo, a posição relativa é aplicada a uma caixa de entrada no código abaixo:
< / corpo >
Neste código:
- Defina a posição do “ entrada ”elementos para“ relativo ”.
- “ foco: traduzir-x-4 ”move o botão 4px para a direita no eixo x e ao mesmo tempo 4px para baixo em“ foco: traduzir-y-4 ”Quando o usuário clica na caixa de entrada.
- “ foco: esboço-2 ”cria um contorno ao redor da caixa de texto quando clicado pelo usuário.
Etapa 2: verifique a saída
Visualize a página da web criada pelo código para perceber a mudança:
A saída acima mostra que o estilo foi aplicado ao elemento selecionado quando ele ficou em foco.
Usando variante ativa com propriedade de posição.
A variante ativa é usada para estilizar os elementos HTML para definir o estado quando o usuário clica e segura um botão ou algum outro elemento. A propriedade position pode tornar a saída mais envolvente para os usuários, criando uma experiência mais dinâmica.
Etapa 1: adicionar a propriedade Hover com posição em HTML
Crie um arquivo HTML e aplique a variante ativa em conjunto com a propriedade position. Por exemplo, essas propriedades são aplicadas a um botão no exemplo de código abaixo:
< botão aula = 'relativo w-48 h-12 bg-blue-500 ativo:translate-y-2 ativo:bg-green-400' >
< período aula = 'texto-branco' >Clique em mim< / período >
< / botão >
< / corpo >
No código acima:
- Defina a posição do “ botão ”elemento para“ relativo ”.
- “ bg-azul-500 ”define a cor de fundo do botão para azul.
- “ ativo: traduzir-y-2 ”move o botão 2px para baixo e muda a cor do botão para verde em“ ativo: bg-green-400 ”.
Etapa 2: verifique a saída
Visualize a página da web criada pelo código acima e clique e segure o botão para ver a alteração:
O gif acima mostra que o estilo do elemento do botão selecionado é alterado quando ele se torna ativo.
Isso é tudo para aplicar foco, foco e outros estados com propriedade de posição no Tailwind.
Conclusão
O foco, foco e outros estados podem ser usados com a propriedade de posição usando as classes predefinidas de foco, foco e outros estados e, em seguida, aplicando atributos de classe de posição como “ absoluto ',' relativo ”E assim por diante em conjunto. Este blog mostrou como usar o foco, foco e outros estados com utilitário de posição no Tailwind.