8.3 מנטין בסיסי תרגול
תרגול - מנטין בסיסי¶
תרגיל 1¶
התקינו Mantine בפרויקט Vite + React + TypeScript חדש והגדירו theme מותאם:
- צבע ראשי: ירוק (green)
- פונט: Rubik (ייבאו מ-Google Fonts)
- רדיוס ברירת מחדל: md
- כותרות בפונט Heebo
וודאו שהכל עובד על ידי הצגת כמה קומפוננטות בסיסיות (Button, Text, Title).
תרגיל 2¶
צרו קומפוננטת UserCard באמצעות Mantine בלבד.
הכרטיס צריך להציג:
- תמונת פרופיל (השתמשו ב-Avatar של Mantine)
- שם המשתמש (Title)
- תפקיד (Text עם c="dimmed")
- כפתור "שלח הודעה" (Button variant="light")
- כפתור "פרופיל" (Button variant="outline")
- הכפתורים זה ליד זה בתחתית הכרטיס (Group)
עטפו הכל ב-Paper עם shadow ו-border.
תרגיל 3¶
צרו דף סטטיסטיקות עם הקומפוננטות הבאות:
- כותרת ראשית "דשבורד - סטטיסטיקות"
- 4 כרטיסי סטטיסטיקה (Paper) ב-SimpleGrid רספונסיבי (1 בטלפון, 2 בטאבלט, 4 בדסקטופ)
- כל כרטיס מציג: כותרת (Text dimmed), ערך מספרי גדול (Text xl bold), ואחוז שינוי (ירוק אם חיובי, אדום אם שלילי)
- מתחת לסטטיסטיקות: שני כרטיסים ב-Grid (8/12 ו-4/12) - האחד "פעילות אחרונה" והשני "סיכום"
תרגיל 4¶
צרו layout של אפליקציה באמצעות AppShell:
- Header עם לוגו בצד ימין וכפתורי ניווט בצד שמאל
- Navbar (סיידבר) עם 5 קישורי NavLink, כולל אחד עם תת-קישורים
- תוכן ראשי שמציג כרטיסיות ב-SimpleGrid
- הסיידבר מתכווץ בטלפון ומופיע עם Burger
- עיצבו את ה-Header עם bg ו-c מותאמים
תרגיל 5¶
צרו קומפוננטת FeatureSection שמציגה תכונות מוצר:
- כותרת ראשית ממורכזת
- תת-כותרת ב-Text dimmed ממורכזת
- רשת של 3 כרטיסי תכונות (SimpleGrid)
- כל כרטיס כולל: אייקון (Text גדול), כותרת (Title order 4), תיאור (Text), כפתור "למד עוד" (Button subtle)
- רספונסיבי: עמודה אחת בטלפון, 3 בדסקטופ
- השתמשו ב-Container להגבלת הרוחב
- Stack לארגון אנכי פנימי
תרגיל 6¶
צרו דף נחיתה שלם עם Mantine בלבד:
חלק 1 - Hero:
- Container ממורכז
- Title order 1 גדול
- Text תיאור
- Group עם 2 כפתורים (filled ו-outline)
חלק 2 - תכונות:
- SimpleGrid עם 4 Paper כרטיסים
- כל אחד עם כותרת ותיאור
חלק 3 - Pricing:
- SimpleGrid עם 3 כרטיסי מחירים
- כרטיס אמצעי מודגש עם shadow גדול יותר
חלק 4 - Footer:
- Group עם קישורים
שאלות¶
- מה ההבדל בין SimpleGrid ל-Grid ב-Mantine? מתי נשתמש בכל אחד?
- מה הכוונה ב-System Props ואיך הם חוסכים לנו קוד?
- מה היתרון של AppShell על פני בניית layout מאפס?
- איך createTheme משפיע על כל הקומפוננטות באפליקציה?
- מה ההבדל בין visibleFrom ל-hiddenFrom?