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