Eventos do ponteiro do Tailwind

Neste artigo vamos discutir a propriedade de eventos de ponteiro do Tailwind e suas classes com exemplos.

A propriedade pointer-events controla como um elemento responde a eventos de mouse ou toque.

Um evento de ponteiro pode auxiliar na criação de uma experiência web interativa e responsiva, especialmente quando se trata de dispositivos de toque, como smartphones e tablets.

Eventos de ponteiro incluem ações como clicar, passar o mouse e arrastar. Esses eventos são usados para acionar ações e animações em páginas da web, tornando-as mais interativas e envolventes.

Índice-

Eventos do ponteiro do Tailwind:
- Classes de eventos de ponteiro Tailwind:

Classes de eventos de ponteiro Tailwind

Tailwind CSS fornece um conjunto de classes que permitem controlar os eventos de ponteiro de um elemento.

As classes de utilitários de eventos de ponteiro do Tailwind incluem:

Aulas	Visão geral
ponteiro-eventos-nenhum	Um elemento que tem um valor de eventos de ponteiro nenhum não responderá a nenhum evento de ponteiro, como cliques, toques, passar o mouse ou arrastar. Esses elementos não respondem totalmente à entrada do usuário.
ponteiro-eventos-automático	Por padrão, a propriedade pointer-events tem o valor auto, o que significa que um elemento responderá a todos os eventos de ponteiro, incluindo cliques, toques, passar o mouse e arrastar, da maneira usual.

Sintaxe

<element class="pointer-events-none">...</element>

<element class="pointer-events-auto">...</element>

Para usar os eventos de ponteiro do Tailwind, basta adicionar a classe apropriada aos seus elementos HTML .

O exemplo abaixo demonstra a classe de eventos de ponteiro em uma tag âncora:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
 <h1 class="text-gray-700 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="my-2 font-semibold">Pointer Events class in Tailwind CSS</p>
 <div class="mt-4 font-medium">
  <a href="#" class="bg-pink-300 mx-1 py-1.5 px-3 rounded pointer-events-none">none</a>
  <a href="#" class="bg-purple-500 mx-1 py-1.5 px-3 rounded pointer-events-auto">auto</a>
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Este exemplo implementa a classe de eventos de ponteiro em um campo de texto de entrada:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
 <h1 class="text-gray-700 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="my-2 font-semibold">Pointer Events class in Tailwind CSS</p>
 <div class="mt-4 font-medium">
  <input class="pointer-events-none p-1 border-2 border-slate-400 rounded" placeholder="none">
  <input class="pointer-events-auto p-1 border-2 border-slate-400 rounded" placeholder="auto">
 </div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

As classes de evento de ponteiro Tailwind fornecem uma maneira simples e eficaz de personalizar o comportamento de eventos de ponteiro em páginas da web.

Ao adicionar essas classes a seus elementos HTML, você pode desativar ou ativar eventos de ponteiro, tornando suas páginas da Web mais interativas e atraentes.

Com a ampla variedade de classes do Tailwind, você pode criar facilmente estilos e comportamentos complexos sem precisar escrever código CSS personalizado.

Nós valorizamos o seu feedback.

Eventos do ponteiro do Tailwind

Classes de eventos de ponteiro Tailwind

Sintaxe

Example:

Example:

Conclusão

Sentindo entediado?