CSS Touch Action

A propriedade CSS de ação touch especifica como um usuário da tela sensível ao toque pode controlar a região de um elemento. A propriedade de ação de toque é usada para alterar a visão de um elemento selecionado em resposta a uma mudança de contato pelo usuário como zoom, rolagem e assim por diante. É a ação tomada por um usuário da tela sensível ao toque em uma seção específica da tela que foi selecionada. Quando o usuário da tela sensível. Mas existem alguns valores diferentes para essa propriedade, como o valor "Pan-x". Se colocarmos esse valor na propriedade "Touch-Action", o usuário não poderá mover o elemento na direção y. Esse elemento só se moverá na direção x por causa do valor "Pan-X" e o mesmo com "Pan-y", "Pan-Right", "Pan-Left" e assim por diante.

Neste guia, mostraremos como definir esses valores na propriedade "Touch-Action" e como funcionará. Discutiremos os valores da propriedade "touch-action" em detalhes nos diferentes exemplos deste guia. Olhe para os exemplos dados e leia -os completamente.

Exemplo 1:

Agora, realizamos nosso primeiro exemplo abrindo o novo arquivo no software de código do Visual Studio. No código do Visual Studio, quando criamos um novo arquivo, temos a opção de selecionar o idioma. Selecionamos o HTML. Primeiro, construímos o código HTML. O código do Visual Studio nos fornece a instalação para obter as tags básicas automaticamente, apenas colocando “!”E depois pressionando“ Enter ”. Então, utilizamos esta instalação e obtemos todas essas tags básicas.

Agora, comece do corpo e adicione um recipiente "div" chamado "Image Touch-Auto". Dentro deste contêiner "Image Touch-Auto", usamos a tag de imagem para adicionar a imagem. Aplicamos a propriedade "Touch-Action" a esta imagem. Adicionamos a “foto.png ”neste código html. Depois de concluir este código, salvamos isso e vamos para o arquivo CSS. Não se esqueça de vincular este arquivo CSS ao arquivo HTML atual. Para vincular os arquivos, utilizamos a tag "Link" na propriedade "Head".

Definimos o "corpo" primeiro e utilizamos a propriedade "Display". O valor que usamos aqui é "flex", que é um layout unidimensional. Em seguida, definimos a propriedade "Flex-Wrap" para "embrulhar". É usado para especificar que os itens de flexão são embrulhados em várias linhas. Depois de definir o corpo, avançamos em direção à "imagem" e começamos a utilizar algumas propriedades que precisamos aqui. Definimos a div chamada "imagem" "margem" como "1Rem" e definimos um valor "500px" para a "largura" da div "imagem" e "500px" para a "altura". Também usamos a propriedade "Over-Flow" e a configuramos como "rolar". Adiciona a "barra de rolagem" para a div chamada "imagem". Definimos sua “posição” como “parente” e utilizamos o “fundo da margem” para “15px”. É usado para especificar a largura do lado inferior.

Agora, temos a “imagem img”. Então, para isso, apenas definimos a "largura" e "altura" e definimos o valor como "600px" para cada um deles. Depois de tudo isso, usamos a propriedade "Touch-Auto" e definimos seu valor como "Auto". Este automóvel é usado para mover a imagem em todas as direções e fornece todas as operações do navegador, como gestos e panning. Quando o usuário da tela sensível.

Fornecemos a saída aqui, onde mostramos que essa imagem se move em todas as direções. Também temos uma barra de rolagem aqui. Mas quando o usuário da tela sensível.

Exemplo #2:

O código HTML que usamos aqui é o mesmo que usamos no primeiro exemplo. Mas neste exemplo, usamos a propriedade "Touch-Action" com o valor "Pan-y".

Aqui, definimos o "Display: Flex" e "Flex-Wrap" para "embrulhar" o "corpo". Em seguida, definimos a "margem" como "1Rem" e a "largura" e "altura" para "700px" e "500px", respectivamente. A palavra -chave "rolagem" é definida aqui para a propriedade "transbordamento". E defina a palavra-chave "relativa" para a propriedade "Posição" como "15px" no "fundo da margem". Os valores de "largura" e "altura" da imagem aqui são "600px" cada. Como discutimos no exemplo aéreo.

Agora, utilizamos o valor "Pan-y" para a propriedade "Touch-Action". Este "Pan-y" restringe o usuário da tela sensível ao toque a mover esta imagem para a direção y apenas. O usuário da tela sensível.

Na saída, apresentamos apenas uma barra de rolagem para entender esse conceito "pan-y" de que só se moverá na direção do eixo Y e não na direção do eixo x.

Exemplo #3:

Aqui, todo o código é o mesmo do exemplo anterior. Mas aqui, utilizamos o "Pan-X" como o valor da propriedade "Touch-Action". Quando definimos o valor dessa propriedade como "Pan-X", restringe o usuário da tela sensível ao toque a mover esta imagem apenas na direção do eixo x. Se o usuário quiser mover essa imagem na direção do eixo y, nada acontece, e essa imagem não se moverá na direção do eixo y por causa do valor "Pan-X".

Fornecemos essa saída para você para que você aprenda esse valor "Pan-X" e veja a barra de rolagem que mostra que ela se move na direção do eixo x apenas. Quando o usuário da tela sensível. Mas quando o usuário da tela sensível.

Exemplo #4:

Mudamos o código HTML. Aqui, adicionamos outra imagem e colocamos algum texto de parágrafo nesta imagem. Usamos o valor "pan-right" da propriedade "touch-action" neste exemplo.

Todas as propriedades que utilizamos aqui para o "corpo", "imagem" e "imagem img" são iguais que usamos nos códigos anteriores. Adicionamos as novas propriedades para o texto que escrevemos na imagem. Definimos a "posição" do parágrafo denominada "Type-Touch" como "Absolute" e definimos sua "largura" como "100%". Alinhamos o texto no "centro", utilizando a "alinhamento de texto" e definimos a propriedade "Fonte-peso" como "Bold", que é uma palavra-chave aqui. Definimos o "130px" "top" para o texto do parágrafo.

Depois disso, utilizamos a propriedade "do tamanho da fonte" e colocamos o "24px" como seu valor. Mudamos a “família da fonte” deste texto de parágrafo para “argelino”. Em seguida, utilizamos o valor "pan-right" para a "ação de toque". Quando esse valor é usado para esta propriedade, permite que o usuário da tela sensível. Quando usamos esse valor de propriedade, o usuário da tela sensível ao toque não moverá esse elemento ou imagem em nenhuma outra direção, exceto o lado direito.

Esta saída é fornecida para que você possa aprender sobre o valor "pan-right" e ver a barra de rolagem, o que indica que ela viajará apenas na direção certa. A imagem se move nessa direção quando o usuário da tela sensível ao toque a move e a move apenas para o lado direito e não se move em nenhuma outra direção. Quando o usuário da tela sensível.

Conclusão

O objetivo de escrever este guia é dar a você um conceito claro da propriedade "touch-action" no CSS. Explicamos esse conceito em detalhes e fornecemos os diferentes exemplos em que utilizamos esta propriedade de "ação de toque". Também usamos os diferentes valores para esta propriedade em cada exemplo. Discutimos que esta propriedade é usada para especificar como um usuário da tela sensível ao toque pode controlar a região do elemento. Quando usamos essa propriedade com valores diferentes, o elemento especificado se moverá de acordo com esse valor que definimos nesta propriedade "touch-action". Usamos os quatro valores diferentes nos quatro exemplos diferentes. Os valores restantes funcionam da mesma forma que seus nomes que o valor "Pan-up" se move apenas na direção ascendente. Espero que você aprenda esta propriedade CSS de "ação de toque" após o aprendizado profundo deste guia, e será útil para você.