CSS Touch Action

Właściwość CSS dotyk-akcja określa, w jaki sposób użytkownik ekranu dotykowego może kontrolować region elementu. Właściwość dotykowa jest używana do zmiany widoku wybranego elementu w odpowiedzi na zmianę kontaktu przez użytkownika, takie jak powiększenie, przewijanie i tak dalej. To działanie podjęte przez użytkownika z ekranem dotykowym w wybranej sekcji ekranu. Gdy użytkownik ekranu dotykowego dotknie ekranu i przewija element, element będzie poruszał się w tym samym kierunku, jak chce użytkownik. Ale istnieją różne wartości dla tej właściwości, takie jak wartość „Pan-x”. Jeśli umieścimy tę wartość w właściwości „dotyku”, użytkownik nie będzie w stanie przenieść elementu w kierunku Y. Ten element porusza się tylko w kierunku X z powodu wartości „Pan-x” i takim samym z „Pan-y”, „Pan-right”, „Pan-lew” i tak dalej.

W tym przewodniku pokażemy, jak ustawić te wartości w właściwości „dotykania” i jak będzie działać. Omówimy szczegółowo wartości właściwości „dotyk-akcję” w różnych przykładach w tym przewodniku. Spójrz na podane przykłady i dokładnie je przeczytaj.

Przykład 1:

Teraz wykonujemy nasz pierwszy przykład, otwierając nowy plik w oprogramowaniu Visual Studio Code. W kodzie Visual Studio, kiedy tworzymy nowy plik, mamy opcję wyboru języka. Wybieramy HTML. Najpierw budujemy kod HTML. Kod Visual Studio zapewnia nam obiekt do automatycznego uzyskania podstawowych tagów, po prostu stawiając „!”, A następnie naciśnięcie„ Enter ”. Używamy więc tego obiektu i otrzymujemy wszystkie te podstawowe tagi.

Teraz zacznij od ciała i dodaj pojemnik „Div” o nazwie „Image Touch-Auto”. Wewnątrz tego pojemnika „Image Touch-Auto” używamy znacznika obrazu, aby dodać obraz. Do tego obrazu stosujemy właściwość „dotknięta”. Dodajemy „zdjęcie.png ”w tym kodzie HTML. Po zakończeniu tego kodu zapisujemy to i idziemy w kierunku pliku CSS. Nie zapomnij połączyć tego pliku CSS z bieżącym plikiem HTML. Aby połączyć pliki, używamy znacznika „linku” we właściwości „Head”.

Najpierw ustawiamy „ciało” i używamy właściwości „Wyświetl”. Wartość, której tu używamy, to „Flex”, który jest jednowymiarowym układem. Następnie ustawiamy właściwość „Flex-Wrap” na „Wrap”. Służy do określenia, że ​​elementy Flex są owinięte w wiele linii. Po ustawieniu ciała idziemy w kierunku „obrazu” i zaczynamy wykorzystywać niektóre właściwości, których potrzebujemy tutaj. Ustawiliśmy div o nazwie „obraz” „margines” na „1rem” i ustawiamy wartość „500px” dla „szerokości” div „Image” i „500px” dla „wysokości” dla „wysokości”. Używamy również właściwości „Over-Flow” i ustawiamy ją na „przewiń”. Dodaje „pasek scroll” dla div o nazwie „obraz”. Ustawiliśmy jego „pozycję” na „względne” i wykorzystujemy „margines-dut” na „15px”. Służy do określenia szerokości dolnej strony.

Teraz mamy „obraz IMG”. W tym celu ustawiamy tylko „szerokość” i „wysokość” i ustawiamy wartość na „600px” dla każdego z nich. Po tym wszystkim używamy właściwości „Touch-Auto” i ustawiamy jej wartość na „Auto”. To automatyczne służy do przenoszenia obrazu we wszystkich kierunkach i zapewnia wszystkie operacje przeglądarki, takie jak gesty i przesuwanie. Gdy użytkownik ekranu dotykowego dotknie tego ekranu, ten obraz porusza się we wszystkich kierunkach.

Dostarczamy wyjście tutaj, w którym pokazaliśmy, że ten obraz porusza się we wszystkich kierunkach. Mamy tutaj również pasek przewijania. Ale kiedy użytkownik z ekranem dotykowym używa tego i dotknie tego ekranu, przeniesie ten obraz w dowolnym kierunku, gdziekolwiek chce.

Przykład nr 2:

Kod HTML, którego tu używamy, jest taki sam, jak w pierwszym przykładzie. Ale w tym przykładzie używamy właściwości „dotyk-akcja” o wartości „Pan-y”.

Tutaj ustawiamy „Display: Flex” i „Flex-Wrap”, aby „owinąć” „ciało”. Następnie ustawiamy „margines” jako „1rem” oraz „szerokość” i „wysokość” odpowiednio na „700px” i „500px”. Słowo kluczowe „Scroll” jest ustawione tutaj dla właściwości „przepełnienie”. I ustaw słowo kluczowe „względne” dla właściwości „pozycji” na „15px” w „marginesie”. Wartości „szerokości” i „wysokości” obrazu tutaj to „600px”. Jak omówiliśmy w przykładzie kosztów.

Teraz wykorzystujemy wartość „Pan-y” dla właściwości „dotykania”. Ten „Pan-y” ogranicza użytkownika ekranu dotykowego, aby przenieść ten obraz tylko do kierunku Y. Użytkownik z ekranem dotykowym nie przesunie tego obrazu w kierunku X, ponieważ używamy „Pan-y” jako wartości tej właściwości „dotyku”.

W wyjściu przedstawiamy tylko jeden pasek przewijania, aby zrozumieć tę koncepcję „pan-y”, że porusza się ona tylko w kierunku osi y, a nie w kierunku osi x.

Przykład nr 3:

Tutaj cały kod jest taki sam jak w poprzednim przykładzie. Ale tutaj używamy „Pan-X” jako wartości właściwości „dotyk-akcji”. Kiedy ustawiamy wartość tej właściwości jako „Pan-X”, ogranicza ona użytkownika ekranu dotykowego, aby przesunąć ten obraz tylko w kierunku osi x. Jeśli użytkownik chce przenieść ten obraz w kierunku osi Y, to nic się nie dzieje, a ten obraz nie porusza się w kierunku osi Y z powodu wartości „Pan-x”.

Zapewniamy to dane wyjściowe, więc nauczysz się tej wartości „Pan-x” i zobaczymy pasek przewijania, który pokazuje, że porusza się tylko w kierunku osi x. Kiedy użytkownik ekranu dotykowy to dotyka i przenosi go do osi X, obraz porusza się w tym kierunku. Ale kiedy użytkownik z ekranem dotykowym porusza ten obraz w kierunku osi Y, obraz nie porusza się w tym kierunku.

Przykład nr 4:

Zmieniamy kod HTML. Tutaj dodajemy kolejny obraz i umieszczamy na tym obrazku tekst akapitowy. W tym przykładzie używamy „prawicowej” wartości właściwości „dotyk-akcji”.

Wszystkie właściwości, których używamy tutaj do „ciała”, „obrazu” i „obrazu IMG” są takie same jak to, co używaliśmy w poprzednich kodach. Dodajemy nowe właściwości tekstu, który napisaliśmy na obrazie. Ustawiliśmy „pozycję” akapitu o nazwie „Type-touch” na „Absolute” i ustawiamy jego „szerokość” na „100%”. Wyrównujemy tekst w „Centrum”, wykorzystując „tekst tekstu” i ustawiamy właściwość „Waseight” na „Bold”, który jest tutaj słowem kluczowym. Ustawiliśmy „130px” „Top” dla tekstu akapitowego.

Następnie wykorzystujemy właściwość „wielkości czcionki” i stawiamy „24px” jako jej wartość. Zmieniamy „rodzinę czcionki” tego tekstu akapitu na „Algierskie”. Następnie wykorzystujemy wartość „prawicową” dla „akcji dotyku”. Gdy ta wartość jest używana dla tej właściwości, pozwala użytkownikowi ekranu dotykowego przesunąć element tylko we właściwym kierunku. Kiedy użyjemy tej wartości właściwości, użytkownik ekranu dotykowego nie przesunie tego elementu ani obrazu w żadnym innym kierunku oprócz prawej strony.

To wyjście jest dostarczane, aby dowiedzieć się o wartości „prawej” i zobaczyć pasek przewijania, który wskazuje, że będzie on podróżował tylko we właściwym kierunku. Obraz porusza się w tym kierunku, gdy użytkownik z ekranem dotykowym przesuwa go i przesuwa tylko po prawej stronie i nie porusza się w żadnym innym kierunku. Gdy użytkownik ekranu dotykowy tego użyje, nie będzie w stanie przesunąć go w lewo, w górę, w prawo lub w żadnym innym kierunku oprócz właściwego kierunku.

Wniosek

Celem napisania tego przewodnika jest zapewnienie jasnej koncepcji właściwości „dotykania” w CSS. Wyjaśniliśmy tę koncepcję szczegółowo i dostarczyliśmy Ci różne przykłady, w których wykorzystaliśmy tę właściwość „dotknięcia”. W każdym przykładzie wykorzystaliśmy również różne wartości dla tej właściwości. Omówiliśmy, że ta właściwość służy do określenia, w jaki sposób użytkownik ekranu dotykowego może kontrolować region elementu. Kiedy używamy tej właściwości o różnych wartościach, określony element porusza. Wykorzystaliśmy cztery różne wartości w czterech różnych przykładach. Pozostałe wartości działają tak samo jak ich nazwy, jak wartość „pan-up” porusza się tylko w kierunku w górę. Mam nadzieję, że poznasz tę nieruchomość CSS „dotykania” po głębokim uczeniu się tego przewodnika i będzie to dla Ciebie pomocne.