קטגוריה: קומפוננטות

איך נכון להתייחס לעמודים שלמים בדיזיין סיסטם?

עמודים שלמים צריכים לספק מסגרת עבודה גמישה שניתן להתאים לצרכים השונים בכל מסך, לכן יש להתייחס לעמודים שלמים כתבניות או טמפלטים ולא כקומפוננטות. אפשר לתעד מבני עמודים נפוצים, אזורי תוכן, הנחיות ריווחים ונקודות שבירה. ספקו דוגמאות על איך קומפוננטות עובדות יחד בעמוד, אך שמרו עליהן גמישות מספיק כדי להתאים לדרישות ייחודיות של עמודים. כדאי לתעד […]

מתי נכון להפריד קומפוננטות ומתי כדאי שישבו באותה קומפוננטה?

קומפוננטות יכולות להיראות דומות מבחינה ויזואלית אך לשרת מטרות שונות, ולכן חשוב להבחין מתי יש הצדקה להפריד אותן ומתי עדיף לשמור אותן בתוך אותה קומפוננטה עם וריאנטים. מתי להפריד קומפוננטות? אם שתי קומפוננטות מתנהגות בצורה שונה או משמשות להקשרים שונים, גם אם הן נראות דומות, עדיף להפריד ביניהן. כך נמנעים מתלות מיותרת ומבטיחים גמישות גבוהה […]

מה הגישה הטובה ביותר לבניית קומפוננטות מורכבות כמו טבלאות, מודאלים ותפריטים?

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

מהם כללי השיום הנכונים עבור קומפוננטות, פרופרטיז ושכבות?

כללי השיום תלויים בד"כ בטכנולוגיה ובפריימוורק בו משתמשים לפיתוח. בפיתוח, לכל פריימוורק יש מוסכמות שיום משלו – לדוגמה, ב-React נהוג להשתמש ב-PascalCase לקומפוננטות (AccordionItem), בעוד שב-Angular מקובל kebab-case (accordion-item). דוגמאות לכללי שיום בסיסיים Reactקומפוננטות – PascalCase, לדוג' Button, DatePicker, UserCardפרופרטיז – camelCase, לדוג' onClick, isDisabled, dateFormat Angularקומפוננטות – kebab-case, לדוג' app-header, user-profileפרופרטיז – camelCase, לדוג' […]