בלוג זה יספק רעיון להקצאת רווח שווה בין מספר אלמנטים ב-Tailwind.
כיצד להקצות רווח שווה בין מספר אלמנטים ברוח הגבית?
משתמשים יכולים להקצות רווחים שווים בין אלמנטים באמצעות ' space-{x/y}-{size} 'מחלקת שירות. משתמשים יכולים להוסיף רווח בציר x או y על ידי ציון ערך מספר שלם. כלי המרווח הכרחי מכיוון שהוא הופך את דף האינטרנט לאטרקטיבי. אם לדף אינטרנט אין מרווח מתאים בין אלמנטים, הוא לא ימשוך משתמשים.
ניקח דוגמה לקוד כדי להקצות רווח שווה בין רכיבי רשת.
שיטה 1: הקצאת שטח על ציר ה-X.
רווח שווה המוקצה על ציר ה-x יוצר מרווח שווה מימין ומשמאל לאלמנט. כדי להקצות את הרווח על ציר ה-x השתמש בתחביר הבא:
מֶרחָב - איקס - { גודל }
הגודל יכול להיות כל ערך של מספר שלם.
שקול את הקוד שלהלן כדי להקצות רווח שווה על ציר ה-x:
< גוּף >< div מעמד = 'mx-4 grid grid-cols-4 space-x-4' >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 1 div >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 2 div >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 3 div >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 4 div >
div >
גוּף >
בקוד הזה:
- ' mx-4 ' מוסיף שוליים של 4 פיקסלים על ציר ה-x (ימין ושמאל).
- ה ' רֶשֶׁת ' הכיתה יוצרת רשת.
- ה ' grid-cols-4 ' ליצור 4 עמודות ברשת.
- ה ' space-x-4 ' מוסיף רווח של 4 פיקסלים בין האלמנטים של הרשת.
- ' bg-green-400 ' מגדיר את צבע הרקע לירוק.
- ' ח-16 ' מגדיר את הגובה ל-16 פיקסלים.
- ה ' מעוגל-lg עושה את הפינה עגולה ורדיוס הגבול גדול.
- ה ' גבול-2 ' יוצר גבול של 2 פיקסלים מסביב לאלמנט.
- ' גבול-ירוק-800 'הופך את הגבול לירוק כהה.
תְפוּקָה
תצוגה מקדימה של הפלט שנוצר על ידי הקוד למעלה:
ניתן לראות כי מוקצה מרווח של 4 פיקסלים בין האלמנטים.
שיטה 2: הקצאת רווח על ציר ה-y.
ניתן להקצות את המרווח על ציר ה-y בדומה לשיטה שלעיל, על ידי שינויים קטנים בקוד לעיל. הוא מקצה רווחים לאורך ציר ה-y (העליון והתחתון). התחביר עבורו הוא:
ניתן ליישם את הקוד שלהלן כדי להוסיף רווחים לאורך ציר ה-y:
< גוּף >< div מעמד = 'mx-4 my-4 space-y-4' >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 1 div >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 2 div >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 3 div >
< div מעמד = 'bg-green-400 h-16 עגול-lg border-2 border-green-800' > 4 div >
div >
גוּף >
בקוד הזה:
- ' mx-4 ' מוסיף שוליים של 4 פיקסלים משמאל וימין של אלמנטים כדי להפוך את הפלט למוטב יותר.
- ' שלי-4 ' מוסיף שוליים של 4 פיקסלים על ציר ה-y (למעלה ולמטה).
- ' space-y-4 ' מוסיף שטח של 4 פיקסלים על ציר ה-y (העליון והתחתון).
תְפוּקָה
שמור את הקוד לעיל והצג תצוגה מקדימה של דף האינטרנט שנוצר על ידו כדי לראות את המרווחים כ:
זה הכל על הקצאת רווח שווה בין אלמנטים.
סיכום
כדי להקצות רווח שווה בין מספר אלמנטים ב-Tailwind, משתמשים יכולים להשתמש ב-' space-{x/y}-{size} ” מחלקת השירות וציין ערך מספר שלם כגודל בהתאם לדרישה. מרווח שווה בין אלמנטים הופך את הפלט לניתן להרחבה יותר והצופים נשארים מעורבים בדף האינטרנט. פוסט זה סיפק את השיטה להקצות רווח שווה בין מספר אלמנטים ב-Tailwind.