כתבה זו תמחיש:
כיצד להשתמש ב-'overflow-auto' ב-Tailwind?
ה ' הצפת-אוטומטי הכיתה מוסיפה אוטומטית פסי גלילה כאשר התוכן עולה על גדותיו. זה לא מציג את פס הגלילה אם התוכן אינו עולה על גדותיו. כדי להשתמש ב-'overflow-auto' ב-Tailwind, צור תוכנית HTML והוסף את ה-' הצפת-אוטומטי ” מחלקת השירות לרכיב הרצוי בתוכנת HTML.
תחביר
< אֵלֵמֶנט מעמד = 'הצפה אוטומטית...' > ... אֵלֵמֶנט >
דוגמא
בדוגמה זו, ניישם את 'הצפה אוטומטית' שירות ל-
מְכוֹלָה: < גוּף >
< div מעמד = 'overflow-auto bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS מספק כלי עזר שונים מסוג 'הצפת', כגון 'הצפה-אוטומטית', 'הצפה-גלילה', 'הצפה-מוסתרת', 'הצפה-גלויה' וכו'. כלי עזר אלו קובעים כיצד אלמנט ספציפי מטפל בתוכן החורג מהמיכל גודל. כל כלי עזר מציע פונקציונליות ייחודית, עם זאת, המטרה הסופית שלהם נשארת זהה, כלומר לשלוט בהתנהגות הגלישה של האלמנט הנבחר.
< / div >
< / גוּף >
- 'הצפה אוטומטית' המחלקה משמשת להוספת פסי הגלילה ל- מיכל והצג אותם רק כאשר יש צורך בגלילה.
- 'bg-purple-300' class מגדיר את הצבע הסגול לצבע הרקע של המיכל.
- 'p-4' מחלקה מגדירה 4 יחידות ריפוד על כל הצדדים של המכולה.
- 'mx-16' class מחיל את 16 יחידות השוליים על ציר ה-x של המיכל.
- 'MT-5' class מחיל את 5 יחידות השוליים על החלק העליון של המיכל.
- 'h-32' class מגדיר את גובה המכולה ל-32 יחידות.
- 'הצדקת טקסט' class מצדיק את הטקסט של התוכן בתוך המיכל.
תְפוּקָה
הפלט שלמעלה מציג פס גלילה אנכי כאשר הטקסט עולה על גדותיו. זה מצביע על כך שה 'הצפה אוטומטית' כלי השירות הוחל על האלמנט בהצלחה.
כיצד להשתמש ב-' overflow-scroll' ב- Tailwind?
כלי זה מוסיף את פסי הגלילה למיכל ותמיד מציג אותם גם אם הגלילה אינה נחוצה. זה גם מאפשר גלילה לכל הכיוונים. כדי להשתמש ב-'overflow-scroll' ב-Tailwind, צור תוכנית HTML והוסף את 'גלילת גדות' מחלקת השירות לרכיב המסוים בתוכנת HTML.
תחביר
< אֵלֵמֶנט מעמד = 'הצפת-גלילה...' > ... אֵלֵמֶנט > דוגמא
בדוגמה זו, ניישם את 'גלילת גדות' שירות ל-
< div מעמד = 'הצפה-גלול bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify' >
Tailwind CSS מספק כלי עזר שונים מסוג 'הצפת', כגון 'הצפה-אוטומטית', 'הצפה-גלילה', 'הצפה-מוסתרת', 'הצפה-גלויה' וכו'. כלי עזר אלו קובעים כיצד אלמנט ספציפי מטפל בתוכן החורג מהמיכל גודל. כל כלי עזר מציע פונקציונליות ייחודית, עם זאת, המטרה הסופית שלהם נשארת זהה, כלומר לשלוט בהתנהגות הגלישה של האלמנט הנבחר.
< / div >
< / גוּף >
הנה ה 'גלילת גדות' המחלקה משמשת להוספת פסי הגלילה ל-
מיכל ותמיד מראה אותם.תְפוּקָה
בפלט לעיל, ניתן לראות פסי גלילה אנכיים ואופקיים כאחד. זה מצביע על כך שה 'גלילת גדות' כלי השירות הוחל על האלמנט בהצלחה.
סיכום
כדי להשתמש ב-'overflow-auto' ו-'overflow-scroll' ב-Tailwind, יש צורך להוסיף את 'הצפה אוטומטית' ו 'גלילת גדות' מחלקות שירות לרכיבים הרצויים בתוכנת HTML. שתי מחלקות השירות מוסיפות פסי גלילה לרכיבים שצוינו. עם זאת, המחלקה 'overflow-auto' מציגה פסי גלילה רק כאשר יש צורך בגלילה בעוד המחלקה 'overflow-scroll' תמיד מציגה אותם גם אם הגלילה אינה נחוצה. כתיבה זו המחישה את השיטות לשימוש ב-'overflow-auto' ו-'overflow-scroll' ב-Tailwind.