8.1 סקירת גישות לעיצוב תרגול
תרגול - סקירת גישות לעיצוב¶
תרגיל 1¶
צרו קומפוננטת StatusBadge שמקבלת prop בשם status עם הערכים "success", "warning", "error".
עצבו אותה באמצעות סגנונות אינליין בלבד.
- צבע רקע שונה לכל סטטוס (ירוק, כתום, אדום)
- טקסט לבן
- פינות מעוגלות
- padding מתאים
תרגיל 2¶
צרו קומפוננטת ProfileCard עם CSS רגיל (קובץ CSS נפרד).
הקומפוננטה צריכה להציג:
- תמונת פרופיל עגולה (השתמשו ב-placeholder image)
- שם משתמש
- תיאור קצר
- כפתור "עקוב" שמשנה צבע ב-hover
השתמשו ב-clsx לניהול מחלקות מותנות:
- כאשר isFollowing הוא true, הכפתור משנה צבע ומציג "עוקב"
תרגיל 3¶
צרו את אותה קומפוננטת ProfileCard מתרגיל 2, אך הפעם עם CSS Modules.
- צרו קובץ
ProfileCard.module.css - השתמשו ב-composes להוריש סגנונות משותפים
- וודאו שהסגנונות מקומיים ולא מתנגשים עם אלמנטים אחרים בדף
תרגיל 4¶
צרו קומפוננטת ThemeButton באמצעות styled-components.
הקומפוננטה צריכה:
- לקבל prop בשם variant עם ערכים "filled", "outline", "ghost"
- לקבל prop בשם size עם ערכים "sm", "md", "lg"
- לשנות את העיצוב בהתאם ל-props
- לכלול אנימציית hover מותאמת לכל variant
תרגיל 5¶
צרו קומפוננטת FeatureCard באמצעות Tailwind בלבד.
הקומפוננטה צריכה להציג:
- אייקון (השתמשו באימוג'י או טקסט רגיל כ-placeholder)
- כותרת
- תיאור
- עיצוב רספונסיבי - בטלפון כרטיס מלא, בדסקטופ כרטיס קומפקטי
- אפקט hover עם הרמת צל
תרגיל 6¶
צרו דף השוואה שמציג את אותו כרטיס (Card) ממומש ב-4 גישות שונות זו לצד זו:
1. סגנונות אינליין
2. CSS Modules
3. Tailwind
4. Mantine (השתמשו בקומפוננטת Card של Mantine)
- כל כרטיס צריך להיראות דומה ככל האפשר
- הוסיפו כותרת מעל כל כרטיס שמציינת את הגישה
שאלות¶
- מה ההבדל בין CSS רגיל לבין CSS Modules מבחינת scope?
- למה styled-components עלולה לפגוע בביצועים בהשוואה ל-CSS Modules?
- מה היתרון של Tailwind על פני כתיבת CSS מותאם? ומה החיסרון?
- באיזו גישת עיצוב הייתם בוחרים לבנות דשבורד אדמין עם טבלאות, טפסים וגרפים? נמקו.
- מתי שימוש בסגנונות אינליין הוא בחירה טובה ומתי לא?