קומפוננטות מורכבות שנועדו להיות מותאמות אישית צריכות להיבנות בדפוס "grab-and-go" – כלומר, כחלקים מודולריים שניתן לחבר יחד לפי צרכים ספציפיים. גישה זו מספקת גמישות לצד שמירה על קונסיסטנטיות. אפשר להגדיר אותן כקומפוננטה עבור שליפה מהירה מהחיפוש במקום העתקה מקובץ ה-DS עצמו ועבור רפרנס למפתחים. במקרה הזה, סמנו אותן כמיועדות לשבירה בפייג׳ של הקומפוננטה ובתיאור שלה.
עקרונות מנחים
- פירוק לתת-רכיבים – חלקו כל קומפוננטה מורכבת לרכיבים בסיסיים בעלי תפקיד יחיד וברור
- הגדרת הקומפוזיציה – צרו דוגמאות של הרכבות נפוצות לשימוש מהיר
- סימון ברור אילו חלקים ניתנים לשינוי – הגדירו אזורי תוכן גמישים לעומת מבנה קבוע
הנה כמה דוגמאות:
מודאלים
צרו קומפוננטות נפרדות להדר ופוטר. חברו אותם לקונטיינר משותף, יחד עם קונטיינר המיועד לתוכן עם spacing קבוע. ספקו דוגמאות של מודאלים לשימושים נפוצים כמו אישור פעולה, התראות או טפסים.
טבלאות
צרו רכיבים בסיסיים כמו תא רגיל, תא כותרת, שורה, הדר ופוטר וחברו אותם לקונטיינר טבלה שלם. הגדירו סטייטים רלוונטיים, כמו האבר וסלקטד, והתנהגויות מתאימות. הציגו דוגמאות לטבלאות במצבי תוכן שונים.
מקמו כל אחד מהרכיבים הבסיסיים בפריים grab-and-go בפייג׳ הקומפוננטה המתאים, והוסיפו דוגמאות הרכבה נפוצות שמציגות את האופן בו הרכיבים מתחברים יחד למבנה שלם.
מהניסיון שצברנו 