Action CSS Touch

La propriété Touch-action CSS spécifie comment un utilisateur à écran tactile peut contrôler la région d'un élément. La propriété tactile est utilisée pour modifier la vue d'un élément sélectionné en réponse à un changement de contact par l'utilisateur tel que le zoom, le défilement, etc. C'est l'action prise par un utilisateur à écran tactile sur une section spécifique de l'écran qui a été sélectionné. Lorsque l'utilisateur de l'écran tactile touche l'écran et fait défiler l'élément, l'élément se déplacera dans le même sens que l'utilisateur le souhaite. Mais il existe des valeurs différentes pour cette propriété, comme la valeur «Pan-X». Si nous mettons cette valeur dans la propriété «Touch-Action», l'utilisateur ne peut pas déplacer l'élément dans la direction y. Cet élément ne se déplacera que dans la direction X en raison de la valeur «Pan-X» et la même chose avec «Pan-y», «Pan-droite», «pan-gauche» et ainsi de suite.

Dans ce guide, nous vous montrerons comment définir ces valeurs dans la propriété «Touch-Action» et comment cela fonctionnera. Nous discuterons en détail des valeurs de la propriété «Touch-Action» dans les différents exemples de ce guide. Regardez les exemples donnés et lisez-les soigneusement.

Exemple 1:

Maintenant, nous effectuons notre premier exemple en ouvrant le nouveau fichier dans le logiciel de code Visual Studio. Dans le code Visual Studio, lorsque nous créons un nouveau fichier, nous avons une option pour sélectionner la langue. Nous sélectionnons le HTML. Tout d'abord, nous construisons le code HTML. Le code Visual Studio nous fournit l'installation pour obtenir automatiquement les balises de base en mettant simplement «!"Puis appuyer sur" Entrer ". Nous utilisons donc cette installation et obtenons toutes ces balises de base.

Maintenant, commencez à partir du corps et ajoutez un conteneur «div» nommé «Image Touch-Auto». À l'intérieur de ce conteneur «Image Touch-Auto», nous utilisons la balise d'image pour ajouter l'image. Nous appliquons la propriété «tactile» à cette image. Nous ajoutons la «photo.png ”dans ce code html. Après avoir terminé ce code, nous enregistrons ceci et allons vers le fichier CSS. N'oubliez pas de lier ce fichier CSS au fichier HTML actuel. Pour lier les fichiers, nous utilisons la balise «lien» dans la propriété «tête».

Nous définissons d'abord le «corps» et utilisons la propriété «Affichage». La valeur que nous utilisons ici est «Flex» qui est une disposition unidimensionnelle. Ensuite, nous avons réglé la propriété «flex-wap» pour «envelopper». Il est utilisé pour spécifier que les éléments de flex sont enveloppés en plusieurs lignes. Après avoir réglé le corps, nous nous dirigeons vers «l'image» et commençons à utiliser certaines propriétés dont nous avons besoin ici. Nous définissons le div nommé «Image» «marge» sur «1rem», et définissons une valeur «500px» pour la «largeur» de la div «image» et «500px» pour la «hauteur». Nous utilisons également la propriété «Over-Flow» et la définissons sur «défilement». Il ajoute la «barre de défilement» pour la div nommée «Image». Nous avons réglé sa «position» sur «relative» et utilisons le «fond de marge» à «15px». Il est utilisé pour spécifier la largeur du côté inférieur.

Maintenant, nous avons «l'image IMG». Donc, pour cela, nous ne définissons que la «largeur» et la «hauteur» et définissons la valeur sur «600px» pour chacun d'eux. Après tout cela, nous utilisons la propriété «Touch-Auto» et définissons sa valeur sur «Auto». Cette auto est utilisée pour déplacer l'image dans toutes les directions et fournit toutes les opérations du navigateur telles que les gestes et le panoramique. Lorsque l'utilisateur de l'écran tactile touche à cet écran, cette image se déplacera dans toutes les directions.

Nous fournissons la sortie ici où nous avons montré que cette image se déplace dans toutes les directions. Nous avons également une barre de défilement ici. Mais lorsque l'utilisateur de l'écran tactile utilise ceci et touche cet écran, il / elle déplacera cette image dans n'importe quelle direction partout où il veut.

Exemple n ° 2:

Le code HTML que nous utilisons ici est le même que nous avons utilisé dans le premier exemple. Mais dans cet exemple, nous utilisons la propriété «Touch-action» avec la valeur «pan-y».

Ici, nous définissons «l'affichage: flex» et «flex-wrap» pour «envelopper» le «corps». Ensuite, nous avons réglé la «marge» comme «1rem» et la «largeur» et la «hauteur» à «700px» et «500px», respectivement. Le mot-clé «Scroll» est défini ici pour la propriété «débordement». Et définir le mot-clé «relatif» de la propriété «position» sur «15px» dans le «marge-fond». Les valeurs «largeur» et «hauteur» de l'image ici sont «600px» chacun. Comme nous l'avons discuté dans l'exemple de surcharge.

Maintenant, nous utilisons la valeur «pan-y» pour la propriété «Touch-Action». Ce «pan-y» restreint l'utilisateur de l'écran tactile à déplacer cette image vers la direction y uniquement. L'utilisateur de l'écran tactile ne déplacera pas cette image dans la direction X car nous utilisons le «pan-y» comme valeur de cette propriété «tactile».

Dans la sortie, nous ne présentons qu'une seule barre de défilement pour comprendre ce concept «pan-y» qu'il ne fera que se déplacer dans la direction de l'axe y et non dans la direction de l'axe des x.

Exemple # 3:

Ici, tout le code est le même que dans l'exemple précédent. Mais ici, nous utilisons le «Pan-X» comme valeur de la propriété «Touch-Action». Lorsque nous définissons la valeur de cette propriété en tant que «Pan-X», il restreint l'utilisateur de l'écran tactile pour déplacer cette image dans la direction de l'axe X uniquement. Si l'utilisateur veut déplacer cette image dans la direction de l'axe des y, alors rien ne se passe, et cette image ne se déplacera pas dans la direction de l'axe y en raison de la valeur «Pan-X».

Nous vous fournissons cette sortie afin que vous appreniez cette valeur «Pan-X» et verrez la barre de défilement qui vous montre qu'elle se déplace dans la direction de l'axe X uniquement. Lorsque l'utilisateur de l'écran tactile le touche et le déplace vers l'axe X, l'image se déplace dans cette direction. Mais lorsque l'utilisateur de l'écran tactile déplace cette image dans la direction de l'axe y, l'image ne se déplacera pas dans cette direction de l'axe y.

Exemple n ° 4:

Nous changeons le code HTML. Ici, nous ajoutons une autre image et mettons du texte de paragraphe sur cette image. Nous utilisons la valeur «Pan-droite» de la propriété «Touch-Action» dans cet exemple.

Toutes les propriétés que nous utilisons ici pour le «corps», «image» et «Image IMG» sont les mêmes que ce que nous avons utilisé dans les codes précédents. Nous ajoutons les nouvelles propriétés du texte que nous avons écrit sur l'image. Nous avons défini la «position» du paragraphe nommé «Type-touch» à «Absolute» et avons réglé sa «largeur» à «100%». Nous alignons le texte dans le «Centre» en utilisant le «Text-Align» et définissons la propriété «Font-Weight» à «Bold» qui est un mot-clé ici. Nous définissons le «Top» «130px» pour le texte du paragraphe.

Après cela, nous utilisons la propriété «taille de police» et mettons le «24px» comme valeur. Nous changeons la «famille de police» de ce texte paragraphe en «algérien». Ensuite, nous utilisons la valeur «Pan-droite» pour «l'action tactile». Lorsque cette valeur est utilisée pour cette propriété, elle permet à l'utilisateur de l'écran tactile de déplacer l'élément dans la bonne direction uniquement. Lorsque nous utilisons cette valeur de propriété, l'utilisateur de l'écran tactile ne déplacera pas cet élément ou cette image dans aucune autre direction, sauf le côté droit.

Cette sortie est fournie afin que vous puissiez en apprendre davantage sur la valeur «pan-droite» et voir la barre de défilement, qui indique qu'elle ne se déplacera que dans la bonne direction. L'image se déplace dans cette direction lorsque l'utilisateur de l'écran tactile le déplace et le déplace sur le côté droit uniquement et ne bouge dans aucune autre direction. Lorsque l'utilisateur de l'écran tactile l'utilise, il ne pourra pas le déplacer à gauche, vers le haut, à droite ou toute autre direction sauf la bonne direction.

Conclusion

Le but de la rédaction de ce guide est de vous donner un concept clair de la propriété «tactile» dans CSS. Nous avons expliqué ce concept en détail et vous a fourni les différents exemples où nous avons utilisé cette propriété «tactile». Nous avons également utilisé les différentes valeurs de cette propriété dans chaque exemple. Nous avons discuté que cette propriété est utilisée pour spécifier comment un utilisateur à écran tactile peut contrôler la région de l'élément. Lorsque nous utilisons cette propriété avec différentes valeurs, l'élément spécifié se déplacera selon cette valeur que nous définissons dans cette propriété «tactile». Nous avons utilisé les quatre valeurs différentes dans les quatre exemples différents. Les valeurs restantes fonctionnent de la même manière que leurs noms car la valeur «pano-up» ne se déplace que dans la direction ascendante. J'espère que vous apprendrez cette propriété CSS «Touch-action» après l'apprentissage en profondeur de ce guide, et il vous sera utile.