Πώς να χρησιμοποιήσετε το Hover, το Focus και άλλες καταστάσεις με την ιδιότητα Position στο Tailwind;

Pos Na Chresimopoiesete To Hover To Focus Kai Alles Katastaseis Me Ten Idioteta Position Sto Tailwind

Το Tailwind Framework στο CSS είναι η πρώτη επιλογή κάθε προγραμματιστή λόγω των ευρειών επιλογών για το στυλ των στοιχείων HTML. Προσφέρει μια μεγάλη συλλογή εργαλείων στην κοινότητα. Είναι ένα πλαίσιο πρώτης χρήσης, που χρησιμοποιείται ενεργά από προγραμματιστές για τη δημιουργία εφαρμογών για κινητά, επιτραπέζιους υπολογιστές και web. Το βοηθητικό πρόγραμμα 'Position' ελέγχει τον τρόπο με τον οποίο τοποθετούνται τα στοιχεία μέσα στο DOM.

Αυτό το άρθρο επεξηγεί τη χρήση του δείκτη αιώρησης, εστίασης και άλλων καταστάσεων με ιδιότητες θέσης στο Tailwind.

Πώς να χρησιμοποιήσετε το Hover, το Focus και άλλες καταστάσεις με την ιδιότητα Position στο Tailwind;

Η ένδειξη αιώρησης, η εστίαση και άλλες καταστάσεις στο Tailwind χρησιμοποιούνται για το στυλ στοιχείων στο Tailwind, παρουσιάζοντας μια ελκυστική και φιλική προς το χρήστη διεπαφή και συναρπαστική εμπειρία στους χρήστες. Μερικές φορές, η ιδιότητα θέσης πρέπει να εφαρμοστεί για να διατηρηθεί η εμπειρία στα υψηλότερα πρότυπα.

Μέθοδος 1: Χρήση παραλλαγής δείκτη με ιδιότητα θέσης

Η παραλλαγή του δείκτη χρησιμοποιείται για το στυλ επιλεγμένων στοιχείων όταν ο χρήστης μετακινεί τον κέρσορα πάνω από αυτό το επιλεγμένο στοιχείο. Ο ' θέση Το χαρακτηριστικό ' μπορεί να χρησιμοποιηθεί σε συνδυασμό με ' φτερουγίζω ” για να ρυθμίσετε τη θέση πριν και μετά την αιώρηση. Αυτό το ζεύγος χρησιμοποιείται για τη δημιουργία μιας συναρπαστικής εμπειρίας για τον χρήστη.

Βήμα 1: Προσθέστε την ιδιότητα Hover with Position σε HTML
Στον παρακάτω κώδικα, η ιδιότητα hover εφαρμόζεται κατά μήκος της ιδιότητας θέσης στο ' κουμπί ' στοιχείο:

< σώμα >
< κουμπί τάξη = 'relative w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< Π τάξη = 'κείμενο-λευκό κείμενο-κέντρο' > Hover Me < / Π >
< / κουμπί >
< / σώμα >

Σε αυτόν τον κώδικα:

Ο ' συγγενής Η κλάση ορίζει το κουμπί σε σχέση με τη γονική σελίδα.
' w-40 ” ορίζει το πλάτος στα 40 px.
' h-12 ” ορίζει το ύψος στα 12 px.
' bg-blue-500 ” ορίζει το χρώμα φόντου σε μπλε.
' αιώρηση: απόλυτος ” αλλάζει τη σχετική θέση του κουμπιού σε απόλυτη όταν ο κέρσορας του ποντικιού κινείται πάνω του.
' hover: translate-x-4 ' μετακινεί το κουμπί 4px προς τα δεξιά στον άξονα x και ταυτόχρονα 4px προς τα κάτω κατά ' hover: translate-y-4 '.
Το κείμενο στοιχίζεται στο κέντρο με ' κείμενο-κέντρο '.

Βήμα 2: Επαλήθευση
Κάντε προεπισκόπηση της ιστοσελίδας που δημιουργήθηκε από τον παραπάνω κώδικα, η οποία μοιάζει με αυτό:

Η έξοδος δείχνει ότι το στοιχείο έχει μετακινηθεί προς τη δεξιά και προς τα κάτω κατεύθυνση κατά 4 εικονοστοιχεία.

Μέθοδος 2: Χρήση παραλλαγής εστίασης με ιδιότητα θέσης

Η παραλλαγή εστίασης χρησιμοποιείται για το στυλ στοιχείων HTML για να τραβήξει την προσοχή του χρήστη και να δώσει έμφαση σε ορισμένα στοιχεία. Η θέση μπορεί επίσης να εφαρμοστεί σε συνδυασμό για να τοποθετήσετε το αντικείμενο σε σχέση ή απόλυτο στη μητρική σελίδα. Γίνεται για να κρατήσει τον χρήστη αφοσιωμένο.

Βήμα 1: Προσθέστε την ιδιότητα εστίασης με θέση σε HTML
Δημιουργήστε ένα αρχείο HTML και εφαρμόστε την ιδιότητα εστίασης με μια κατάλληλη θέση. Για παράδειγμα, η σχετική θέση εφαρμόζεται σε ένα πλαίσιο εισόδου στον παρακάτω κώδικα:

< σώμα >

< / σώμα >

Σε αυτόν τον κώδικα:

Ορίστε τη θέση του ' εισαγωγή 'στοιχεία σε' συγγενής '.
' εστίαση: translate-x-4 ' μετακινεί το κουμπί 4px προς τα δεξιά στον άξονα x και ταυτόχρονα 4px προς τα κάτω κατά ' εστίαση: translate-y-4 ' όταν ο χρήστης κάνει κλικ στο πλαίσιο εισαγωγής.
' εστίαση: περίγραμμα-2 ” δημιουργεί ένα περίγραμμα γύρω από το πλαίσιο κειμένου όταν το κάνει κλικ ο χρήστης.

Βήμα 2: Επαληθεύστε την έξοδο
Κάντε προεπισκόπηση της ιστοσελίδας που δημιουργήθηκε με κώδικα για να παρατηρήσετε την αλλαγή:

Η παραπάνω έξοδος δείχνει ότι το στυλ έχει εφαρμοστεί στο επιλεγμένο στοιχείο όταν εστιάζει.

Χρήση Ενεργής παραλλαγής με ιδιότητα θέσης.

Η ενεργή παραλλαγή χρησιμοποιείται για το στυλ των στοιχείων HTML για τον καθορισμό της κατάστασης όταν ο χρήστης κάνει κλικ και κρατά πατημένο ένα κουμπί ή κάποιο άλλο στοιχείο. Η ιδιότητα θέσης μπορεί να κάνει την έξοδο πιο ελκυστική για τους χρήστες δημιουργώντας μια πιο δυναμική εμπειρία.

Βήμα 1: Προσθέστε την ιδιότητα Hover with Position σε HTML
Δημιουργήστε ένα αρχείο HTML και εφαρμόστε την ενεργή παραλλαγή σε συνδυασμό με την ιδιότητα θέσης. Για παράδειγμα, αυτές οι ιδιότητες εφαρμόζονται σε ένα κουμπί στο παρακάτω παράδειγμα κώδικα:

< σώμα >
< κουμπί τάξη = 'relative w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< σπιθαμή τάξη = 'κείμενο-λευκό' >Κάντε κλικ σε εμένα< / σπιθαμή >
< / κουμπί >
< / σώμα >

Στον παραπάνω κώδικα:

Ορίστε τη θέση του ' κουμπί 'στοιχείο σε ' συγγενής '.
' bg-blue-500 ” ορίζει το χρώμα φόντου του κουμπιού σε μπλε.
' ενεργός: translate-y-2 ' μετακινεί το κουμπί 2 εικονοστοιχεία προς τα κάτω και αλλάζει το χρώμα του κουμπιού σε πράσινο κατά ' ενεργό: bg-green-400 '.

Βήμα 2: Επαληθεύστε την έξοδο
Κάντε προεπισκόπηση της ιστοσελίδας που δημιουργήθηκε από τον παραπάνω κώδικα και κάντε κλικ και κρατήστε πατημένο το κουμπί για να δείτε την αλλαγή:

Το παραπάνω gif δείχνει ότι το στυλ του επιλεγμένου στοιχείου κουμπιού αλλάζει όταν γίνεται ενεργό.

Αυτά είναι όλα για την εφαρμογή του δείκτη, εστίασης και άλλων καταστάσεων με την ιδιότητα θέσης στο Tailwind.

συμπέρασμα

Οι καταστάσεις αιώρησης, εστίασης και άλλων καταστάσεων μπορούν να χρησιμοποιηθούν με την ιδιότητα θέσης χρησιμοποιώντας τις προκαθορισμένες κλάσεις αιώρησης, εστίασης και άλλες καταστάσεις, εφαρμόζοντας στη συνέχεια χαρακτηριστικά κλάσης θέσης όπως ' απόλυτος ',' συγγενής » και ούτω καθεξής σε συνδυασμό. Αυτό το ιστολόγιο έχει δείξει πώς να χρησιμοποιείτε το δείκτη του ποντικιού, την εστίαση και άλλες καταστάσεις με το βοηθητικό πρόγραμμα θέσης στο Tailwind.

Πώς να χρησιμοποιήσετε το Hover, το Focus και άλλες καταστάσεις με την ιδιότητα Position στο Tailwind;