מדריך שימוש בטאבים
הטאבים מאפשרים לכם לארגן תוכן במספר כרטיסיות שניתן לפתוח ולסגור. הם מתאימים לנושאים שונים או מידע עזר שלא כל אחד צריך לראות מיד.
איך זה עובד
יש שני סוגים של תגיות:
<tab>- יוצר כרטיסייה בודדת עם תוכן<tabs-widget>- יוצר את הקופסה עם כל הכרטיסיות
דוגמה בסיסית
תחביר מפורט
תג הכרטיסייה
<tab title="[כותרת הכרטיסייה]" widget="[מזהה הקבוצה]">
[תוכן ויקיטקסט מלא]
</tab>- title - הכותרת שתופיע בראש הכרטיסייה (חובה)
- widget - מזהה הקבוצה שמחבר כמה כרטיסיות יחד (ברירת מחדל: "default")
- תוכן הכרטיסייה יכול להכיל כל דבר: טקסטים, טבלאות, תבניות, קישורים וכו׳
תג קבוצת הכרטיסיות
<tabs-widget open-all-text="[טקסט הפתיחה]" close-all-text="[טקסט הסגירה]" header-level="[רמת כותרת]" id="[מזהה]" />- open-all-text - הטקסט של הקישור לפתיחת הכל (לא חובה, יש ברירת מחדל)
- close-all-text - הטקסט של הקישור לסגירת הכל (לא חובה, יש ברירת מחדל)
- header-level - רמת הכותרת של הכרטיסיות (2-6, ברירת מחדל: 3). קובע אם הכותרות יהיו H2, H3, H4, H5 או H6
- id - המזהה שמתאים לפרמטר widget בכרטיסיות (ברירת מחדל: "default"). דרוש כאשר הרכיב בשימוש יותר מפעם אחת בדף
איך זה נראה
במחשב
- הכרטיסיות מוצגות אופקית בשורה
- כל הכרטיסיות סגורות בהתחלה
- לחיצה על כותרת פותחת/סוגרת כרטיסייה בודדת
- קישור "הצג את כל המידע" פותח את הכל בבת אחת
- כשהכל פתוח, הקישור משתנה ל"סגור הכל"
- הצבעים מתחלפים: ירוק, כחול, טורקיז, תכלת
בנייד
- הכרטיסיות מוצגות כאקורדיון אנכי
- כל כרטיסייה ניתן לפתוח/לסגור בנפרד
- קישור "הצג הכל/סגור הכל" עובד גם כאן
בהדפסה
- כל התוכן מוצג ללא כפתורים
- מתאים להדפסה בשחור-לבן
- מעוצב בצורה נקייה וקריאה
דוגמה נוספת עם כרטיסיות קצרות ורמת כותרת מותאמת
טיפים לשימוש
- השתמשו בכותרות קצרות וברורות
- כדאי להשתמש כשיש מידע שלא כל אחד צריך לראות מיד
- מתאים לחלקים של הסברים, דוגמאות, או פרטים טכניים
- השתמשו בפרמטר header-level כדי להתאים את רמת הכותרת למבנה הדף (למשל header-level="4" אם הטאבים בתוך סעיף H3)
- הטאבים עובדים גם בלי JavaScript - התוכן עדיין יהיה נגיש
פתרון בעיות
אם הטאבים לא עובדים:
- ודאו שיש תג
<tabs-widget>עם אותו מזהה כמו בכרטיסיות - בדקו שאין שגיאות כתיב בתגיות
- ודאו שכל תג
<tab>נסגר עם</tab>