Αυτό το άρθρο θα παρουσιάσει τα βοηθητικά προγράμματα που μπορούν να χρησιμοποιηθούν για τον έλεγχο της τοποθέτησης των τοποθετημένων στοιχείων στην ιστοσελίδα.
Tailwind Utilities που χρησιμοποιούνται για τον έλεγχο της τοποθέτησης των τοποθετημένων στοιχείων;
Το βοηθητικό πρόγραμμα Tailwind CSS που ασχολείται ειδικά με την τοποθέτηση τοποθετημένων στοιχείων τόσο σε οριζόντιο όσο και σε κάθετο άξονα είναι ' Κορυφή | Δεξιά | Κάτω | Αριστερά '. Όπως και άλλα βοηθητικά προγράμματα, παρέχει επίσης διάφορες κλάσεις που μπορούν να ορίσουν το τοποθετημένο στοιχείο σε διάφορα σημεία, μερικές από αυτές τις κατηγορίες αναφέρονται παρακάτω:
- inset-{placementValue}
- start-{placementValue}
- top-{placementValue}
- end-{placementValue}
- bottom-{placementValue}
- αριστερά-{placementValue}
- δεξιά-{placementValue}
Τώρα, ας έχουμε ένα πρακτικό παράδειγμα για να χρησιμοποιήσουμε μερικές από αυτές τις τάξεις για καλύτερη κατανόηση.
Παράδειγμα: Τοποθέτηση τοποθετημένου στοιχείου με χρήση βοηθητικών προγραμμάτων Tailwind CSS
Σε αυτό το παράδειγμα, το βοηθητικό πρόγραμμα που περιγράφεται παραπάνω θα χρησιμοποιηθεί για την τοποθέτηση του τοποθετημένου στοιχείου σε διαφορετικά σημεία σε μια ιστοσελίδα, όπως φαίνεται παρακάτω:
< σώμα τάξη = 'grid grid-cols-3' >
< div τάξη = 'σχετικό h-32 w-32 bg-πορτοκαλί-200 p-4 m-4 κείμενο-κέντρο δικαιολογία-έκταση στρογγυλεμένο' >
< div τάξη = 'απόλυτο αριστερό-0 top-0 h-16 w-16 bg-μπλε-400 στρογγυλεμένο p-4' > Στοιχείο 1 < / div >
< / div >
< div τάξη = 'σχετικό h-32 w-32 bg-πορτοκαλί-200 p-4 m-4 κείμενο-κέντρο δικαιολογία-έκταση στρογγυλεμένο' >
< div τάξη = 'απόλυτο ένθετο-x-0 top-0 h-16 bg-blue-400 στρογγυλεμένο p-4' > Στοιχείο 2 < / div >
< / div >
< div τάξη = 'σχετικό h-32 w-32 bg-πορτοκαλί-200 p-4 m-4 κείμενο-κέντρο δικαιολογία-έκταση στρογγυλεμένο' >
< div τάξη = 'απόλυτο ένθετο-0 bg-blue-400 στρογγυλεμένο p-4' > Στοιχείο 3 < / div >
< / div >
< div τάξη = 'σχετικό h-32 w-32 bg-πορτοκαλί-200 p-4 m-4 κείμενο-κέντρο δικαιολογία-έκταση στρογγυλεμένο' >
< div τάξη = 'απόλυτο ένθετο-y-0 δεξιά-0 w-16 bg-μπλε-400 στρογγυλεμένο p-4' > Στοιχείο 4 < / div >
< / div >
< div τάξη = 'σχετικό h-32 w-32 bg-πορτοκαλί-200 p-4 m-4 κείμενο-κέντρο δικαιολογία-έκταση στρογγυλεμένο' >
< div τάξη = 'απόλυτο κάτω-0 δεξιά-0 h-16 w-16 bg-μπλε-400 στρογγυλεμένο p-4' > Στοιχείο 5 < / div >
< / div >
< / σώμα >
Περιγραφή του παραπάνω κώδικα:
- Πρώτα, δημιουργήστε πέντε γονείς div ” στοιχεία και εφαρμόστε διάφορες κλάσεις Tailwind CSS για να ορίσετε τη σχετική θέση, ύψος, πλάτος, φόντο, επένδυση, περιθώριο κ.λπ.
- Στη συνέχεια, δημιουργήστε ένα ένθετο ' div ' στοιχείο μέσα σε κάθε γονικό 'div'. Η τοποθέτηση θα γίνει για αυτό το ένθετο στοιχείο 'div'.
- Στη συνέχεια, εφαρμόστε κλάσεις tailwind CSS του ' απόλυτος », « η », « Σε », « bg ''' Π ', και ' στρογγυλεμένο “για να διαμορφώσετε το ένθετο” div ' στοιχείο.
- Μετά από αυτό, ξεκινώντας από το ένθετο div ένα έως το πέντε, αντιστοιχίστε νέες κλάσεις του ' αριστερά-0 top-0 », « ένθετο-χ-0 », « ένθετο-0 », « ένθετο-y-0 δεξιά-0 ', και ' κάτω-0 δεξιά-0 ” αντίστοιχα.
- Αυτές οι κλάσεις ορίζουν τη θέση των ένθετων στοιχείων div στην επάνω αριστερή γωνία, καλύπτουν την επάνω θέση, καλύπτουν ολόκληρο τον γονικό χώρο, καλύπτουν τη δεξιά πλευρά και καλύπτουν την κάτω αριστερή θέση αντίστοιχα.
Μετά την εκτέλεση, η προεπισκόπηση των στοιχείων div μοιάζει με αυτό:
Η έξοδος δείχνει ότι τα τοποθετημένα στοιχεία τοποθετούνται στις επιθυμητές θέσεις.
συμπέρασμα
Ο ' Κορυφή | Δεξιά | Κάτω | Αριστερά Το βοηθητικό πρόγραμμα Tailwind χρησιμοποιείται για τον έλεγχο της τοποθέτησης στοιχείων στην ιστοσελίδα. Χρησιμοποιεί πολλές κλάσεις για να στοχεύσει κάθε θέση και στη συνέχεια μετακινεί το επιλεγμένο στοιχείο σε αυτό το μέρος σύμφωνα με τις απαιτήσεις. Αυτές οι κατηγορίες τοποθετούν κυρίως τα τοποθετημένα στοιχεία αριστερά, δεξιά, κάτω και πάνω. Μπορούν να βοηθήσουν στην κάλυψη ολόκληρης της περιοχής, να καλύψουν συγκεκριμένες κατευθύνσεις όπως αριστερά ή πάνω και ούτω καθεξής. Αυτό το άρθρο έχει εξηγήσει με επιτυχία τα βοηθητικά προγράμματα που μπορούν να χρησιμοποιηθούν για τον έλεγχο της τοποθέτησης των τοποθετημένων στοιχείων.