Αυτό το άρθρο θα εξηγήσει τη μέθοδο εφαρμογής του φαινομένου αιώρησης στο βοηθητικό πρόγραμμα αυτόματης ροής δικτύου στο Tailwind CSS.
Πώς να εφαρμόσετε το Hover στο Grid Auto Flow στο Tailwind;
Για να εφαρμόσετε το εφέ αιώρησης στην αυτόματη ροή πλέγματος στο Tailwind, δημιουργήστε ένα αρχείο HTML και χρησιμοποιήστε το ' φτερουγίζω 'τάξη με το ' πλέγμα-ροή-<λέξη-κλειδί> ” βοηθητικό πρόγραμμα στο πρόγραμμα HTML. Αλλάζει την τοποθέτηση των στοιχείων πλέγματος όταν το ποντίκι αιωρείται πάνω τους. Τέλος, προβάλετε τη σελίδα HTML web και τοποθετήστε το δείκτη του ποντικιού σε στοιχεία πλέγματος για να διασφαλίσετε τις αλλαγές.
Δείτε τα βήματα που παρέχονται για την πρακτική εφαρμογή του:
Βήμα 1: Χρησιμοποιήστε την ιδιότητα Hover με το πλέγμα γραμμών στο πρόγραμμα HTML
Δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' φτερουγίζω “Ακίνητο με το επιθυμητό” πλέγμα-ροή-<λέξη-κλειδί> ” χρησιμότητα. Για παράδειγμα, χρησιμοποιήσαμε το « hover:grid-flow-row ” κλάση για αλλαγή της τοποθέτησης των στοιχείων πλέγματος από στήλη σε σειρά κατά την τοποθέτηση του δείκτη:
< σώμα >
< div τάξη = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div τάξη = 'bg-teal-500 p-5' > 1 < / div >
< div τάξη = 'bg-teal-500 p-5' > 2 < / div >
< div τάξη = 'bg-teal-500 p-5' > 3 < / div >
< div τάξη = 'bg-teal-500 p-5' > 4 < / div >
< div τάξη = 'bg-teal-500 p-5' > 5 < / div >
< div τάξη = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / σώμα >
Εδώ:
- ' πλέγμα Η κλάση ορίζει το στοιχείο ως κοντέινερ πλέγματος.
- ' πλέγμα-ροή-κολ ” ορίζει τη ροή των στοιχείων πλέγματος σε στήλες.
- ' hover:grid-flow-row Η κλάση αλλάζει τη ροή των στοιχείων πλέγματος σε σειρές όταν το ποντίκι αιωρείται πάνω από το κοντέινερ.
- ' κενό-3 ” προσθέτει ένα κενό 3 μονάδων μεταξύ των στοιχείων του πλέγματος.
- ' m-3 ” προσθέτει ένα περιθώριο 3 μονάδων γύρω από το δοχείο πλέγματος.
- ' κείμενο-κέντρο ” ευθυγραμμίζει το περιεχόμενο κειμένου μέσα στα στοιχεία του πλέγματος στο κέντρο.
Βήμα 2: Επαλήθευση εξόδου
Για να επαληθεύσετε ότι το εφέ αιώρησης έχει εφαρμοστεί στην αυτόματη ροή πλέγματος, προβάλετε την ιστοσελίδα και μετακινήστε το ποντίκι πάνω από τα στοιχεία πλέγματος:
Μπορεί να παρατηρηθεί ότι αρχικά η ροή των στοιχείων πλέγματος είναι σε στήλες και όταν το ποντίκι αιωρείται πάνω τους, η ροή αλλάζει σε σειρές. Αυτό υποδεικνύει ότι το εφέ αιώρησης εφαρμόζεται με επιτυχία στην αυτόματη ροή πλέγματος.
συμπέρασμα
Για να εφαρμόσετε το εφέ αιώρησης στην αυτόματη ροή πλέγματος στο Tailwind, χρησιμοποιήστε το ' φτερουγίζω “τάξη με το επιθυμητό” πλέγμα-ροή-<λέξη-κλειδί> ” βοηθητικό πρόγραμμα στο πρόγραμμα HTML. Αλλάζει την τοποθέτηση των στοιχείων πλέγματος όταν το ποντίκι αιωρείται πάνω τους. Για να διασφαλίσετε τις αλλαγές, προβάλετε τη σελίδα HTML web και τοποθετήστε το δείκτη του ποντικιού σε στοιχεία πλέγματος. Αυτό το άρθρο παρουσιάζει τη μέθοδο εφαρμογής του φαινομένου αιώρησης στο βοηθητικό πρόγραμμα αυτόματης ροής δικτύου στο Tailwind CSS.