8.4 מנטין קומפוננטות תרגול
תרגול - מנטין קומפוננטות¶
תרגיל 1¶
צרו טופס רישום מלא עם הקומפוננטות הבאות:
- TextInput: שם מלא, אימייל
- NumberInput: גיל (מינימום 13, מקסימום 120)
- Select: מדינה (עם חיפוש)
- Radio.Group: מגדר
- Checkbox: הסכמה לתנאי שימוש
- Textarea: אודות (אופציונלי)
- Switch: קבלת עדכונים באימייל
- Button: שלח (disabled כאשר ה-Checkbox לא מסומן)
עטפו הכל ב-Paper עם כותרת.
תרגיל 2¶
צרו דף מוצרים עם הרכיבים הבאים:
- רשימת מוצרים בכרטיסיות (Card) עם תמונה, שם, תיאור, מחיר ותגית (Badge)
- כפתור "הוסף לעגלה" בכל כרטיסייה
- חיפוש מוצרים בראש הדף (TextInput)
- סינון לפי קטגוריה (Select)
- עימוד (Pagination) בתחתית
השתמשו ב-SimpleGrid רספונסיבי.
תרגיל 3¶
צרו דף הגדרות עם Tabs:
כרטיסייה "כללי":
- TextInput: שם, אימייל
- Select: שפה, אזור זמן
- כפתור שמירה
כרטיסייה "אבטחה":
- TextInput: סיסמה נוכחית, סיסמה חדשה, אישור סיסמה
- Switch: אימות דו-שלבי
- כפתור עדכון
כרטיסייה "התראות":
- רשימת Switch עבור: אימייל, SMS, Push, עדכוני מוצר
- Select: תדירות עדכונים (מיידי, יומי, שבועי)
- כפתור שמירה
תרגיל 4¶
צרו קומפוננטת ניהול משימות (Task Manager):
- טבלה (Table) עם: שם משימה, אחראי (Avatar + שם), תאריך יעד, סטטוס (Badge), עדיפות (Badge)
- תפריט פעולות (Menu) בכל שורה: עריכה, שינוי סטטוס, מחיקה
- כפתור "הוסף משימה" שפותח Modal עם טופס
- המודאל כולל: שם משימה (TextInput), אחראי (Select), תאריך יעד (TextInput), עדיפות (Radio), תיאור (Textarea)
- Tabs לסינון: הכל, פתוחות, בתהליך, הושלמו
תרגיל 5¶
צרו דף פרופיל משתמש שכולל:
חלק עליון:
- Avatar גדול עם שם ותפקיד
- סטטיסטיקות (3 מספרים: פוסטים, עוקבים, עוקב)
- כפתורי פעולה (עריכה, שליחת הודעה)
חלק אמצעי:
- Tabs: פוסטים, תגובות, מועדפים
- בכל כרטיסייה: רשימת כרטיסיות (Card) עם תוכן
חלק תחתון:
- Alert עם מידע על החשבון
- Progress של השלמת פרופיל
תרגיל 6¶
צרו Drawer (מגירה) של עגלת קניות:
- כפתור "עגלה" שפותח Drawer מצד שמאל
- בתוך ה-Drawer:
- כותרת "העגלה שלך"
- רשימת מוצרים עם: שם, מחיר, NumberInput לכמות, כפתור הסרה
- Divider
- סה"כ מחיר (Text גדול ומודגש)
- כפתור "המשך לתשלום" (fullWidth)
- Skeleton כאשר "טוען"
כשהעגלה ריקה, הציגו הודעה עם Alert.
שאלות¶
- מה ההבדל בין Modal ל-Drawer? מתי תשתמשו בכל אחד?
- מה הפונקציה של Card.Section ולמה היא שימושית?
- מה ההבדל בין Notification ל-Alert? מתי משתמשים בכל אחד?
- איך LoadingOverlay עובד ומה צריך לוודא באלמנט ההורה?
- מה היתרון של שימוש ב-Menu מול בניית תפריט dropdown מאפס?