CSS Touch Action
In questa guida, ti mostreremo come impostare questi valori nella proprietà "touch-action" e come funzionerà. Discuteremo in dettaglio i valori della proprietà "touch-action" nei diversi esempi in questa guida. Guarda gli esempi forniti e leggili a fondo.
Esempio 1:
Ora eseguiamo il nostro primo esempio aprendo il nuovo file nel software di codice Visual Studio. Nel codice Visual Studio, quando creiamo un nuovo file, abbiamo un'opzione per selezionare la lingua. Selezioniamo l'HTML. Innanzitutto, costruiamo il codice HTML. Il codice Visual Studio ci fornisce la funzione per ottenere i tag di base automaticamente semplicemente mettendo "!"E quindi premendo" Invio ". Quindi, utilizziamo questa struttura e otteniamo tutti questi tag di base.
Ora, inizia dal corpo e aggiungi un contenitore "Div" chiamato "Image Touch-Auto". All'interno di questo contenitore "Image Touch-Auto", utilizziamo il tag immagine per aggiungere l'immagine. Applichiamo la proprietà "touch-action" a questa immagine. Aggiungiamo la "foto.png "in questo codice HTML. Dopo aver completato questo codice, salviamo questo e andiamo verso il file CSS. Non dimenticare di collegare questo file CSS al file HTML corrente. Per collegare i file, utilizziamo il tag "link" nella proprietà "head".
Impostamo prima il "corpo" e utilizziamo la proprietà "display". Il valore che utilizziamo qui è "flex" che è un layout unidimensionale. Quindi, abbiamo impostato la proprietà "Flex-Wrap" su "Avvolgimento". Viene utilizzato per specificare che gli elementi di flessione sono avvolti in più linee. Dopo aver impostato il corpo, ci muoviamo verso "immagine" e iniziamo a utilizzare alcune proprietà di cui abbiamo bisogno qui. Abbiamo impostato il div chiamato "immagine" "margine" su "1rem" e impostiamo un valore "500px" per la "larghezza" della div "immagine" e "500px" per "altezza". Utilizziamo anche la proprietà "flow over-flow" e la impostiamo su "scorrimento". Aggiunge la "barra di scorrimento" per il div chiamato "immagine". Abbiamo impostato la sua "posizione" su "relativo" e utilizziamo il "margine-bottom" su "15px". Viene utilizzato per specificare la larghezza del lato inferiore.
Ora abbiamo "Image IMG". Quindi, per questo, abbiamo impostato solo la "larghezza" e "altezza" e impostiamo il valore su "600px" per ciascuno di essi. Dopo tutto questi, utilizziamo la proprietà "Touch-Auto" e impostiamo il suo valore su "Auto". Questa auto viene utilizzata per spostare l'immagine in tutte le direzioni e fornisce tutte le operazioni del browser come gesti e panning. Quando l'utente touchscreen tocca questa schermata, questa immagine si sposterà in tutte le direzioni.
Forniamo l'output qui dove abbiamo dimostrato che questa immagine si muove in tutte le direzioni. Abbiamo anche una barra di scorrimento qui. Ma quando l'utente touchscreen lo usa e tocca questa schermata, sposta questa immagine in qualsiasi direzione ovunque voglia.
Esempio n. 2:
Il codice HTML che utilizziamo qui è lo stesso che abbiamo usato nel primo esempio. Ma in questo esempio, utilizziamo la proprietà "touch-action" con il valore "pan-y".
Qui, impostiamo il "display: flex" e "flex-wrap" per "avvolgere" il "corpo". Quindi, abbiamo impostato il "margine" come "1rem" e la "larghezza" e "altezza" su "700px" e "500px", rispettivamente. La parola chiave "scroll" è impostata qui per la proprietà "overflow". E imposta la parola chiave "relativa" per la proprietà "posizione" su "15px" nel "margine-bottom". I valori "larghezza" e "altezza" dell'immagine qui sono "600px" ciascuno. Come abbiamo discusso nell'esempio aereo.
Ora utilizziamo il valore "pan-y" per la proprietà "touch-action". Questo "pan-y" limita l'utente touchscreen a spostare questa immagine solo nella direzione Y. L'utente touchscreen non sposterà questa immagine nella direzione X perché utilizziamo il "pan-y" come valore di questa proprietà "touch-action".
Nell'output, presentiamo solo una barra di scorrimento per capire questo concetto "pan-y" che si muoverà solo nella direzione dell'asse Y e non nella direzione dell'asse X.
Esempio #3:
Qui, tutto il codice è lo stesso dell'esempio precedente. Ma qui, utilizziamo il "Pan-X" come valore della proprietà "touch-action". Quando impostiamo il valore di questa proprietà come "Pan-X", limita l'utente touchscreen a spostare questa immagine solo nella direzione dell'asse X. Se l'utente vuole spostare questa immagine nella direzione dell'asse Y, allora non succede nulla e questa immagine non si muoverà nella direzione dell'asse Y a causa del valore "Pan-X".
Forniamo questo output per te in modo da imparerai questo valore "pan-x" e vedrai la barra di scorrimento che ti mostra che si muove solo nella direzione dell'asse x. Quando l'utente touchscreen lo tocca e lo sposta all'asse x, l'immagine si muove in questa direzione. Ma quando l'utente touchscreen sposta questa immagine nella direzione dell'asse Y, l'immagine non si muoverà in questa direzione dell'asse Y.
Esempio #4:
Cambiamo il codice HTML. Qui, aggiungiamo un'altra immagine e mettiamo un po 'di testo su questa immagine. Usiamo il valore "padella" della proprietà "touch-action" in questo esempio.
Tutte le proprietà che utilizziamo qui per il "corpo", "immagine" e "immagine img" sono le stesse di quelle che abbiamo usato nei codici precedenti. Aggiungiamo le nuove proprietà per il testo che abbiamo scritto sull'immagine. Abbiamo impostato la "posizione" del paragrafo denominato "type-touch" su "assoluto" e impostato la sua "larghezza" al "100%". Allineiamo il testo nel "centro" utilizzando la "allineamento del testo" e impostiamo la proprietà "font-peso" su "grassetto" che è una parola chiave qui. Abbiamo impostato il "top" "130px" per il testo del paragrafo.
Dopo questo, utilizziamo la proprietà "Size Font" e mettiamo il "24PX" come valore. Cambiamo la "famiglia di font" di questo testo di paragrafo in "algerino". Quindi, utilizziamo il valore "padella" per "Touch-action". Quando questo valore viene utilizzato per questa proprietà, consente all'utente touchscreen di spostare l'elemento solo nella giusta direzione. Quando utilizziamo questo valore della proprietà, l'utente touchscreen non sposterà questo elemento o immagine in nessun'altra direzione tranne il lato destro.
Questo output è fornito in modo da poter conoscere il valore "padella" e vedere la barra di scorrimento, il che indica che viaggerà solo nella giusta direzione. L'immagine si muove in questa direzione quando l'utente touchscreen lo sposta e la sposta solo sul lato destro e non si muove in nessun'altra direzione. Quando l'utente touchscreen lo usa, non sarà in grado di spostarlo a sinistra, a destra o in qualsiasi altra direzione tranne la giusta direzione.
Conclusione
Lo scopo di scrivere questa guida è di darti un chiaro concetto di proprietà "touch-action" in CSS. Abbiamo spiegato questo concetto in dettaglio e ti hanno fornito i diversi esempi in cui abbiamo utilizzato questa proprietà "touch-action". Abbiamo anche usato i diversi valori per questa proprietà in ogni esempio. Abbiamo discusso che questa proprietà viene utilizzata per specificare come un utente touchscreen può controllare la regione dell'elemento. Quando utilizziamo questa proprietà con valori diversi, l'elemento specificato si muoverà in base a quel valore che impostiamo in questa proprietà "touch-action". Abbiamo usato i quattro valori diversi nei quattro diversi esempi. I valori rimanenti funzionano allo stesso modo dei loro nomi poiché il valore "pan-up" si muove solo nella direzione verso l'alto. Spero che imparerai questa proprietà CSS "touch-action" dopo il profondo apprendimento di questa guida, e sarà utile per te.