ה ' מסך h ” class ב-Tailwind משמש להקצאת גובה יציאת התצוגה לרכיב HTML. Viewport הוא רק שם נוסף לגודל המסך של לקוח. המפתח יכול לבחור בקלות את כל שדה התצוגה בעזרת ' מסך h ' בכיתה ולאחר מכן להחיל מספר שיעורי Tailwind בהתאם.
מאמר זה יספק את ההליך להוספת גובה יציאת התצוגה לאלמנט ב-Tailwind באמצעות ' מסך h ' מעמד.
כיצד להגדיר גובה נקודת מבט של אלמנט באמצעות המחלקה 'h-screen' ב-Tailwind?
אם לרכיב מוקצה גובה יציאת התצוגה באמצעות ' מסך h ', הוא יתאים אוטומטית את תכונת הגובה שלו בהתאם למסך של הלקוח. כדי להשתמש בגובה יציאת התצוגה ב-Tailwind, עקוב אחר האמנה המפורטת להלן:
< div מעמד = 'מסך h' > שלום < / div >
מההדגמה לעיל, ברור כי ' מסך h ' משמש בתכונת class של האלמנט יחד עם מחלקות Tailwind שונות אחרות לעיצוב הפריסה.
בואו ניצור לוח מחוונים דמה, וניתן גובה נקודת מבט לסרגל הצד של מסך לוח המחוונים.
< div מעמד = 'לְהַגמִישׁ' >
< div מעמד = 'w-56 h-screen rounded-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 מעמד = 'טקסט-center text-3xl py-8 ps-5' >ברוכים הבאים ללוח המחוונים!< / div >
< / div >
הסבר על הקוד:
- ראשית, ' div אלמנט ' נוצר עם המחלקה של ' לְהַגמִישׁ ', מחלקה זו מיישרת את הפריטים השוהים בקו אופקי.
- לאחר מכן, צור עוד ' div ' עם 8 פיקסלים של ריפוד עליון ותחתון באמצעות ' py-2 ' מחלקה ולהקצות לו רוחב קבוע באמצעות ' w-56 ' מעמד. לאחר מכן, הגדר את גובה האלמנט לגובה יציאת התצוגה עם ' מסך h ' מעמד. פינות המיכל מוגדרות לעוגלות.
- ה ' bg-{color}-{number} 'מחלקה משמשת כדי לספק צבע רקע למיכל. ה ' מרכז טקסט מחלקה מיישרת את תוכן הטקסט למרכז. משקל הגופן עבור הטקסט מוגדר ל' נוֹעָז ', וגודל הגופן הוא ' 2xl '.
- לאחר מכן, רשימה לא מסודרת '< ul >' נוצר עם גודל גופן גדול ו' 48 פיקסלים ' שוליים עליון באמצעות מחלקת רוח הגב 'space-y'.
- לאחר מכן, נוצרים ארבעה פריטי רשימה באמצעות '< זֶה >' תגיות.
- עוד ' div אלמנט ' נוצר עם ריפוד התחלה מוטבע בגודל 32 פיקסלים מלמעלה למטה ו-20 פיקסלים באמצעות ' py' ו-'ps 'שיעורים.
הפלט עבור הקוד שהוסבר לעיל הוא כדלקמן:
מהפלט לעיל, ברור שלסרגל הצד של לוח המחוונים יש את גובה יציאת התצוגה של המסך. זה הכל לגבי המטרה של ' מסך h שיעור ב-Tailwind.
סיכום
ה ' מסך h ” class ב-Tailwind משמש להקצאת גובה ה-Viewport לאלמנט כלומר גובה המסך של הלקוח. משתמש ב ' מסך h ” class, האלמנט יירש אוטומטית את גובה המסך. על מנת להשתמש בגובה יציאת התצוגה ב-Tailwind, ' מסך h ' יש להעביר את המאפיין כערך עבור ' מעמד ' תכונה כמו '< div class= 'h-screen ”>”. מאמר זה סיפק את ההליך לשימוש ב' מסך h שיעור ב-Tailwind.