Ο ' οθόνη h Η κλάση στο Tailwind χρησιμοποιείται για την εκχώρηση του ύψους της θύρας προβολής σε ένα στοιχείο HTML. Το Viewport είναι απλώς ένα άλλο όνομα για το μέγεθος οθόνης ενός πελάτη. Ο προγραμματιστής μπορεί εύκολα να επιλέξει ολόκληρη τη θύρα προβολής με τη βοήθεια αυτού του ' οθόνη h ” τάξη και στη συνέχεια εφαρμόστε αρκετές κατηγορίες Tailwind ανάλογα.
Αυτό το άρθρο θα παρέχει τη διαδικασία για την προσθήκη του ύψους της θύρας προβολής σε ένα στοιχείο στο Tailwind χρησιμοποιώντας το ' οθόνη h ” τάξη.
Πώς να ορίσετε ένα ύψος θύρας προβολής ενός στοιχείου χρησιμοποιώντας την κλάση 'h-screen' στο Tailwind;
Εάν σε ένα στοιχείο έχει εκχωρηθεί το ύψος της θύρας προβολής χρησιμοποιώντας το ' οθόνη h », θα προσαρμόσει αυτόματα την ιδιότητα ύψους σύμφωνα με την οθόνη του πελάτη. Για να χρησιμοποιήσετε το ύψος της θύρας προβολής στο Tailwind, ακολουθήστε την παρακάτω σύμβαση:
< div τάξη = 'h-screen' > Γειά σου < / div >
Από την παραπάνω επίδειξη, είναι σαφές ότι το « οθόνη h ' χρησιμοποιείται στο χαρακτηριστικό class του στοιχείου μαζί με διάφορες άλλες κατηγορίες Tailwind για το σχεδιασμό της διάταξης.
Ας δημιουργήσουμε έναν εικονικό πίνακα εργαλείων και ας δώσουμε ένα ύψος θυρίδας προβολής στην πλαϊνή γραμμή της οθόνης του πίνακα εργαλείων.
< div τάξη = 'καλώδιο' >
< div τάξη = 'w-56 h-screen στρογγυλεμένη-lg bg-blue-600 text-center text-cyan-50 py-6 text-2xl font-bold' > Ταμπλό
< ul τάξη = 'text-lg py-8 space-y-7' >
< ότι >Ομάδα< / ότι >
< ότι >Έργα< / ότι >
< ότι >Αναφορές< / ότι >
< ότι >Έγγραφα< / ότι >
< / ul >
< / div >
< div τάξη = 'κείμενο στο κέντρο κειμένου-3xl py-8 ps-5' >Καλώς ήρθατε στο The Dashboard!< / div >
< / div >
Επεξήγηση του κώδικα:
- Πρώτον, ένα « div Το στοιχείο ' δημιουργείται με την κλάση ' καλώδιο ”, αυτή η κλάση ευθυγραμμίζει τα στοιχεία που βρίσκονται σε οριζόντια γραμμή.
- Στη συνέχεια, δημιουργήστε ένα άλλο ' div ' με 8 εικονοστοιχεία επάνω και κάτω επένδυσης χρησιμοποιώντας το ' py-2 ' κλάση και εκχωρήστε της ένα σταθερό πλάτος χρησιμοποιώντας το ' w-56 ” τάξη. Στη συνέχεια, ορίστε το ύψος του στοιχείου στο ύψος της θύρας προβολής με το ' οθόνη h ” τάξη. Οι γωνίες του δοχείου είναι στρογγυλεμένες.
- Ο ' bg-{color}-{number} Η κλάση ' χρησιμοποιείται για την παροχή χρώματος φόντου στο κοντέινερ. Ο ' κείμενο-κέντρο Η τάξη ευθυγραμμίζει το περιεχόμενο του κειμένου στο κέντρο. Το βάρος γραμματοσειράς για το κείμενο έχει οριστεί σε ' τολμηρός ' και το μέγεθος της γραμματοσειράς είναι ' 2xl '.
- Στη συνέχεια, μια μη ταξινομημένη λίστα «< ul >' δημιουργείται με μεγάλο μέγεθος γραμματοσειράς και ένα ' 48 εικονοστοιχεία ' margin-top χρησιμοποιώντας την κλάση tailwind 'space-y'.
- Στη συνέχεια, δημιουργούνται τέσσερα στοιχεία λίστας χρησιμοποιώντας το «< ότι >» ετικέτες.
- Αλλο ' div ' το στοιχείο δημιουργείται με 32px επάνω-κάτω και 20px inline-start padding χρησιμοποιώντας το ' py' και 'ps ” τάξεις.
Η έξοδος για τον κώδικα που εξηγήθηκε παραπάνω είναι η εξής:
Από την παραπάνω έξοδο, είναι σαφές ότι η πλαϊνή γραμμή του ταμπλό έχει το ύψος της θύρας προβολής της οθόνης. Αυτός είναι ο σκοπός του ' οθόνη h τάξη στο Tailwind.
συμπέρασμα
Ο ' οθόνη h Η κλάση ' στο Tailwind χρησιμοποιείται για την εκχώρηση του ύψους Viewport σε ένα στοιχείο, δηλαδή το ύψος της οθόνης του πελάτη. Χρησιμοποιώντας την ' οθόνη h ”, το στοιχείο θα κληρονομήσει αυτόματα το ύψος της οθόνης. Για να χρησιμοποιήσετε το ύψος της θύρας προβολής στο Tailwind, το ' οθόνη h Η ιδιότητα πρέπει να μεταβιβαστεί ως τιμή για την τάξη ' χαρακτηριστικό όπως '< div class= «h-screen ”>”. Αυτό το άρθρο παρέχει τη διαδικασία για τη χρήση του ' οθόνη h τάξη στο Tailwind.