8.6 מנטין מתקדם תרגול
תרגול - מנטין מתקדם¶
תרגיל 1¶
צרו theme מותאם מלא לאפליקציית ניהול פרויקטים:
- צבע ראשי מותאם (צרו סקלת צבעים של 10 גוונים)
- פונט עברי לכותרות (Heebo), פונט עברי לטקסט (Rubik)
- רדיוס ברירת מחדל md
- ברירות מחדל לקומפוננטות: Button (radius md), TextInput (variant filled), Card (shadow sm, withBorder)
- הוסיפו CSSVariablesResolver עם משתנים: sidebar-width, header-height, שונים לבהיר/כהה
הדגימו שה-theme עובד על דף עם כמה קומפוננטות.
תרגיל 2¶
השתמשו ב-Styles API לעיצוב קומפוננטות:
- צרו TextInput מותאם עם label מודגש, input עם גבול צבעוני, ו-error מותאם
- צרו Button מותאם עם תוספת של text-transform ו-letter-spacing
- צרו Card מותאם עם hover effect (שינוי צל ותזוזה קלה למעלה)
- הגדירו את כל הסגנונות גם ברמת ה-theme (components) וגם ברמת קומפוננטה בודדת
- השתמשו ב-CSS Modules עם classNames
תרגיל 3¶
צרו קומפוננטה מותאמת InfoCard באמצעות factory:
הקומפוננטה כוללת את החלקים:
- root - המיכל הראשי
- icon - אזור אייקון
- content - אזור תוכן
- title - כותרת
- description - תיאור
דרישות:
- תמיכה ב-Styles API (classNames, styles)
- תמיכה ב-system props
- תמיכה ב-ref forwarding
- ניתן לדרוס סגנונות ב-theme
- variants: default, highlighted, outlined
תרגיל 4¶
צרו דף שמדגים קומפוננטות פולימורפיות:
- Button שפועל כ-Link (הדמיה)
- Text שפועל כ-label
- Paper שפועל כ-section
- Card שפועל כ-article
- הציגו כל אחד עם הסבר של למה להשתמש ב-polymorphic
תרגיל 5¶
צרו מערכת theme עם MantineProvider מקונן:
- theme ראשי כחול לכל האפליקציה
- אזור "אזהרה" עם theme אדום
- אזור "הצלחה" עם theme ירוק
- כל אזור משנה את הצבע הראשי, הרדיוס, וגם ברירות מחדל של קומפוננטות
- הדגימו שקומפוננטות זהות נראות שונה בכל אזור
תרגיל 6¶
צרו דשבורד מלא שמשתמש בכל הטכניקות המתקדמות:
- Theme מותאם עם צבעים, פונטים, ו-components
- CSSVariablesResolver עם משתנים ל-layout
- קומפוננטת StatCard מותאמת עם factory
- Styles API לעיצוב טבלה מותאמת
- קומפוננטות פולימורפיות בניווט
- CSS Modules עם משתני Mantine
שאלות¶
- מה ההבדל בין classNames ל-styles ב-Styles API? מתי נעדיף כל אחד?
- מה היתרון של CSSVariablesResolver על פני הגדרת משתני CSS ידנית?
- למה factory שימושי ליצירת קומפוננטות? מה הוא מספק מעבר ל-forwardRef רגיל?
- מה קורה כשמשתמשים ב-MantineProvider מקונן? האם ה-theme העליון נמחק?
- מה היתרון של polymorphic components על פני עטיפה רגילה?