רכיבי הוראות שימוש
'מדריך: רכיבים' הוא אוסף של רכיבי אינטרנט שמטמיעים דפוסים נפוצים של ממשק משתמש. מטרת ההטמעות האלה היא לשמש כמשאב חינוכי. אפשר לקרוא את ההטמעה של הרכיבים השונים עם ההערות הצפופות, ולקוות ללמוד מהם. חשוב לזכור שהן לא ספריית ממשק משתמש, ואין להשתמש בהן לא בסביבת הייצור.
רכיבים
<howto-checkbox>: מייצג אפשרות בוליאננית בטופס. הסוג הנפוץ ביותר של תיבת סימון הוא תיבת סימון עם שתי אפשרויות, שמאפשרת למשתמש לעבור בין שתי אפשרויות – מסומנת ולא מסומנת.<howto-tabs>: מגביל את התוכן הגלוי על ידי הפרדה שלו לכמה לוחות.<howto-tooltip>: חלון קופץ שבו מוצג מידע שקשור לרכיב כשהרכיב מקבל את מוקד ההקלדה או כשמעבירים מעליו את העכבר.
יעדים
המטרה שלנו היא להדגים שיטות מומלצות לכתיבה של רכיבים חזקים, נגישים, יעילים, קלים לתחזוקה וקלים לעיצוב. כל רכיב הוא עצמאי לחלוטין, כך שהוא יכול לשמש כהטמעת עזר.
נגישות
הרכיבים תואמים מאוד לשיטות הכתיבה של WAI ARIA, מדריך שמסביר ומראה את ARIA, התקן של אפליקציות אינטרנט מתקדמות ונגישות. אם אתם לא מכירים את ARIA, תוכלו לעיין במאמר ההקדמה שלנו בנושא WebFundamentals. כל רכיב מקשר לקטע הרלוונטי של שיטות הכתיבה. לא חובה, אבל מומלץ לקרוא את הקטע בנושא שיטות כתיבה לפני שמתחילים לעבוד עם הקוד.
ביצועים
בפיתוח אתרים, המונח 'ביצועים' יכול לחול על מגוון רחב של דברים. בהקשר של <howto>, הביצועים מתייחסים בעיקר לאנימציות שפועלות באופן עקבי בקצב של 60fps, גם במכשירים ניידים.
גמישות חזותית
ככל האפשר, לא מוסיפים סגנון לרכיבים, מלבד לפריסה או כדי לציין מצב נבחר או פעיל. כך אפשר לשמור על גמישות חזותית ועל מיקוד בהטמעה. כשלא משקיעים זמן בפרטים קטנים, אפשר להגביל את הקוד רק למה שדרוש באופן מוחלט כדי שהרכיב יפעל. אם נדרש סגנון כלשהו כדי שהרכיב יפעל, הסגנון יסומן עם תגובה שמסבירה למה.
קוד שניתן לתחזוקה
מכיוון ש-HowTo: Components הוא הטמעה לדוגמה, הקדשנו זמן נוסף לכתיבת קוד קריא וברור עם הרבה הערות.
יעדים שאינם יעדים עסקיים
להיות ספרייה, מסגרת או ערכת כלים
הרכיבים של <howto> לא מתפרסמים ב-npm, ב-bower או בפלטפורמה אחרת, כי הם לא מיועדים לשימוש בסביבת הייצור. כדי ליצור קוד קצר וקריאו, אנחנו משתמשים בממשקי JavaScript API מודרניים ותומכים בדפדפנים מודרניים שמטמיעים את תקני Web Components. אחרי שתעיינו בהטמעות האלה, תוכלו להתאים את הקוד לצרכים שלכם.
תאימות לאחור
אין להסתמך ישירות על הקוד. יכול להיות, וכנראה שנעשה, שנעשה שינויים דרסטיים בהטמעה וב-API של כל רכיב אם נמצא דרך טובה יותר להטמיע אותו. זהו מקור מידע דינמי שבו נוכל לשתף, לבחון ולדון בשיטות מומלצות לפיתוח ממשקי משתמש אינטרנטיים.
להיות מלאה
בשלב זה אנחנו לא מטמיעים (וכנראה לא נטמיע) את *כל *הרכיבים שאפשר למצוא בשיטות הכתיבה של WAI ARIA. עם זאת, שימוש חוזר בעקרונות שמשמשים ברכיבים אחרים של <howto> אמור לאפשר לקוראים להטמיע רכיבים חסרים.