Questo articolo illustra l'utilizzo del passaggio del mouse, dello stato attivo e di altri stati con proprietà di posizione in Tailwind.
Come utilizzare il passaggio del mouse, il focus e altri stati con la proprietà di posizione in Tailwind?
Il passaggio del mouse, lo stato attivo e altri stati in Tailwind vengono utilizzati per definire lo stile degli elementi in Tailwind presentando agli utenti un'interfaccia accattivante e intuitiva e un'esperienza coinvolgente. A volte, la proprietà position deve essere applicata per mantenere l'esperienza ai suoi standard più elevati.
Metodo 1: utilizzo della variante Hover con la proprietà Position
La variante al passaggio del mouse viene utilizzata per definire lo stile degli elementi selezionati quando l'utente sposta il cursore su tale elemento selezionato. IL ' posizione L'attributo ' può essere utilizzato insieme a ' passa il mouse ' per impostare la posizione prima e dopo il passaggio del mouse. Questa coppia viene utilizzata per creare un'esperienza coinvolgente per l'utente.
Passaggio 1: aggiungi la proprietà Hover con posizione in HTML
Nel codice seguente, la proprietà hover viene applicata lungo la proprietà position su ' pulsante 'elemento:
< corpo >
< pulsante classe = 'relativo w-40 h-12 bg-blu-500 hover:assoluto hover:translate-x-4 hover:translate-y-4 ' >
< P classe = 'testo-bianco testo-centro' > Passami sopra < / P >
< / pulsante >
< / corpo >
In questo codice:
- IL ' parente La classe 'imposta il pulsante relativo alla pagina principale.
- “ w-40 ' imposta la larghezza su 40px.
- “ h-12 ' imposta l'altezza su 12px.
- “ bg-blu-500 ” imposta il colore di sfondo su blu.
- “ al passaggio del mouse: assoluto ” cambia la posizione relativa del pulsante in assoluta quando il cursore del mouse si sposta su di esso.
- “ passa il mouse: traduci-x-4 ' sposta il pulsante di 4px a destra sull'asse x e contemporaneamente di 4px verso il basso di ' passa il mouse: traduci-y-4 ”.
- Il testo è allineato al centro da ' centro-testo ”.
Passaggio 2: verifica
Visualizza l'anteprima della pagina web creata dal codice sopra, che assomiglia a questa:
L'output mostra che l'elemento è stato spostato verso destra e verso il basso di 4px.
Metodo 2: utilizzo della variante Focus con la proprietà Position
La variante focus viene utilizzata per definire lo stile degli elementi HTML per attirare l'attenzione dell'utente e dare enfasi ad alcuni elementi. La posizione può essere applicata anche insieme per posizionare l'oggetto relativo o assoluto rispetto alla pagina padre. Viene fatto per mantenere l'utente impegnato.
Passaggio 1: aggiungi la proprietà Focus con posizione in HTML
Crea un file HTML e applica la proprietà focus con una posizione adatta. Ad esempio, la posizione relativa viene applicata a una casella di input nel codice seguente:
< / corpo >
In questo codice:
- Imposta la posizione del “ ingresso 'elementi a' parente ”.
- “ focus: traduci-x-4 ' sposta il pulsante di 4px a destra sull'asse x e contemporaneamente di 4px verso il basso di ' focus: traduci-y-4 ' quando l'utente fa clic sulla casella di input.
- “ focus: schema-2 ' crea un contorno attorno alla casella di testo quando l'utente fa clic.
Passaggio 2: verificare l'output
Visualizza l'anteprima della pagina web creata dal codice per notare la modifica:
L'output sopra mostra che lo stile è stato applicato all'elemento selezionato quando viene messo a fuoco.
Utilizzo della variante attiva con la proprietà Position.
La variante attiva viene utilizzata per definire lo stile degli elementi HTML per definire lo stato quando l'utente fa clic e tiene premuto un pulsante o qualche altro elemento. La proprietà position può rendere l'output più coinvolgente per gli utenti creando un'esperienza più dinamica.
Passaggio 1: aggiungi la proprietà Hover con posizione in HTML
Crea un file HTML e applica la variante attiva insieme alla proprietà position. Ad esempio, queste proprietà vengono applicate a un pulsante nell'esempio di codice seguente:
< pulsante classe = 'relativo w-48 h-12 bg-blu-500 attivo:translate-y-2 attivo:bg-verde-400' >
< arco classe = 'testo-bianco' >Fai clic su di me< / arco >
< / pulsante >
< / corpo >
Nel codice sopra:
- Imposta la posizione del “ pulsante 'elemento a' parente ”.
- “ bg-blu-500 ” imposta il colore di sfondo del pulsante su blu.
- “ attivo: traduci-y-2 ' sposta il pulsante di 2px verso il basso e cambia il colore del pulsante in verde tramite ' attivo: bg-green-400 ”.
Passaggio 2: verificare l'output
Visualizza l'anteprima della pagina Web creata dal codice precedente e fai clic e tieni premuto il pulsante per vedere la modifica:
La gif sopra mostra che lo stile dell'elemento del pulsante selezionato viene modificato quando diventa attivo.
Questo è tutto per applicare il passaggio del mouse, il focus e altri stati con la proprietà position in Tailwind.
Conclusione
Gli stati hover, focus e altri possono essere utilizzati con la proprietà position utilizzando le classi predefinite di hover, focus e altri stati, quindi applicando attributi della classe posizione come ' assoluto ', ' parente ” e così via in concomitanza. Questo blog ha mostrato come utilizzare il passaggio del mouse, lo stato attivo e altri stati con l'utilità di posizione in Tailwind.