Este artigo fornecerá o procedimento para aplicar a propriedade de altura mínima ao Hover, Focus e outros estados no Tailwind.
Observação: Para saber mais sobre classes de altura mínima no Tailwind, leia isto artigo Em nosso site.
Como aplicar a propriedade Min-height ao foco, foco e outros estados no Tailwind?
Tailwind fornece variantes de estado padrão que podem ser fornecidas com as propriedades de design. Essas variantes de estado incluem “pairar”, “foco” e “ativo”. A descrição dessas variantes de estado é a seguinte:
- O' flutuar ”O estado é acionado sempre que o cursor do mouse passa sobre um elemento.
- O ' foco ”O estado é acionado sempre que o elemento está em foco.
- O ' ativo ”O estado é acionado sempre que o elemento é ativado ou clicado.
Vamos usar a propriedade da altura mínima com cada um desses estados, um por um.
Usando propriedade de altura mínima com estado de foco
Para usar o “ altura mínima ”Classe com uma variante de estado de foco no Tailwind, a seguinte sintaxe é usada:
< divisão aula = 'hover:min-h-{tamanho}...' > < / divisão >
Vamos usar a sintaxe definida acima em uma demonstração. Neste exemplo, aumentaremos a altura mínima de um elemento sempre que o cursor do mouse passar sobre o elemento.
< divisão aula = 'min-h-fit arredondado-md bg-blue-700 text-center text-white hover:min-h-screen' > Passe o mouse para aumentar o mínimo altura < / divisão >A explicação do código acima é a seguinte:
- O ' mínimo-w-ajuste ”A classe define o limite mínimo de altura para a altura exigida pelo elemento div para ajustar seu conteúdo.
- O ' pairar: min-w-tela ”a classe fornecerá um limite mínimo de altura igual a 100% do tamanho da tela.
- O ' MD arredondado ',' bg-{cor}-{número} ',' centro de texto ', e ' texto-branco ”As classes são responsáveis pelos cantos arredondados, cor de fundo, texto alinhado ao centro e cor de texto branco para o elemento div, respectivamente. os cantos do elemento div arredondados.
Saída:
Fica claro na saída abaixo que a altura mínima do elemento aumenta para 100% do tamanho da tela conforme o cursor do mouse passa sobre ele.
Usando propriedade de altura mínima com estado de foco
Para usar o “ altura mínima ”Com o estado de foco no Tailwind, a seguinte sintaxe é usada:
< divisão aula = 'foco:min-h-{tamanho}...' > < / divisão >Vamos usar a sintaxe definida acima em uma demonstração. Neste exemplo, a altura mínima de um campo de entrada aumentará quando o usuário focar nele.
< entrada espaço reservado = 'Foco neste campo de entrada' aula = 'min-h-0 h-fit w-48 arredondado-md bg-gray-200 foco no centro do texto:min-h-[35%]' >< / entrada >A explicação do código acima é a seguinte:
- Um ' entrada ”O campo é criado com algum texto no atributo de espaço reservado.
- É fornecido um limite mínimo de altura de 0px usando o “ min-h-0 ' aula. Assim, o desenvolvedor definiu a altura padrão do elemento igual à altura necessária para ajustar o conteúdo usando o “ ajuste h ' aula.
- O ' foco:min-h-[35%] ”A classe aumentará o limite mínimo de altura do campo de entrada quando o usuário focar nele.
Saída:
Fica claro na saída abaixo que a altura do campo de entrada aumenta à medida que o usuário se concentra nele. Isso ocorre porque o limite mínimo de altura aumenta de 0px para 35% da altura da tela.
Usando propriedade de altura mínima com estado ativo no Tailwind
Para usar o “ altura mínima ”Propriedade com a variante de estado ativo no Tailwind, a seguinte sintaxe é usada:
< divisão aula = 'ativo:min-h-{tamanho}...' > < / divisão >Vamos usar a sintaxe definida acima em uma demonstração. Neste exemplo, a altura mínima do botão aumentará quando o usuário clicar ativamente nele.
< botão aula = 'min-h-0 h-fit w-48 round-md bg-blue-300 text-center ativo:min-h-[35%]' > Clique para Aumentar Altura < / botão >Um botão é criado com um limite mínimo de altura de 0px. No entanto, usando o “ ativo:min-h-[35%] ”o limite mínimo de altura aumentará de 0px para 35% do tamanho da tela sempre que o botão for clicado.
Saída:
Pode-se observar na saída a seguir que a altura mínima do botão aumenta quando o usuário clica nele.
Trata-se de aplicar a propriedade de altura mínima ao foco, foco e outros estados do Tailwind no Tailwind.
Conclusão
As variantes de estado como pairar, focar e ativo no Tailwind permitem aos usuários criar layouts de design dinâmicos. Para usar a classe de altura mínima com variantes de estado no Tailwind, o “ pairar:min-h-{valor} ',' foco:min-h-{valor} ', e ' ativo:min-h-{valor} ”classes são usadas. Este artigo forneceu o procedimento para aplicar foco, foco e outros estados com a classe de altura mínima no Tailwind.