ווידג'ט הכרטיסיות משתמש ברכיב המותאם אישית <devsite-selector> כדי לארגן נתונים שיש להם מספר ייצוגים, כגון דוגמאות קוד בשפות תכנות או מבני נתונים מיוצגים בפורמטים שונים (כגון JSON, YAML), או XML).
שימוש כללי
הדוגמה הבאה משתמשת ברכיב המותאם אישית <devsite-selector> כדי לעבד שלושה קטעים בכרטיסייה באמצעות HTML.
כותרת של כרטיסייה 1
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
Semper tort nec decum sagittis: Nunk Masa ipsum, mollis Non neque
sed, vulputate disnissim odio.
כותרת של כרטיסייה 2
Tab 2 Content
Curabitur semper toror nec decum sagittis. Nunk Masa ipsum, mollis
un neque sed, vulputate Dinissim odio. Lorem ipsum dolor sit amet, consectetur adipiscic elit.
כותרת של כרטיסייה 3
Tab 3 Content
Nunc Masa ipsum, mollis Non neque sed, vulputate disnissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. קוראסטור סמפר
tortor nec decum sagittis.
בדוגמה הבאה נעשה שימוש בתחביר של Markdown כדי לעבד את שלוש הכרטיסיות האלה.
כותרת של כרטיסייה 1
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. סירקטור Nunk Masa ipsum, mollis Non neque sed ,
vulputate disnissim odio.
כותרת של כרטיסייה 2
Tab 2 Content
Curbitur semper tortor nec decum sagittis. Nunk Masa ipsum, mollis Non-neque sed, vulputate disnissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscic elit.
כותרת של כרטיסייה 3
Tab 3 Content
Nunca Masip, mollis Non neque sed, vulputate disnissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscic elit. קרבן סימטור טטור טורס
נאק דמוקט סאגיטטיס.
ווידג'ט כרטיסיות עם אפשרויות נוספות
הדוגמה הבאה משתמשת ברכיב המותאם אישית <devsite-selector> אבל יש בה יותר מדי כרטיסיות כדי להתאים למסך, והיא מועברת אוטומטית לתפריט הנפתח עוד.
תפוחים
תוכן בנושא תפוחים
משמשים
תוכן הכולל משמשים
אבוקדו
תוכן על אבוקדו
תאנים
תוכן בנושא תאנים
ענבים
תוכן בנושא ענבים
קייווירוט
תוכן לגבי Kiwifruit
לימונים
תוכן בנושא לימונים
פרוסות ליים
תוכן בנושא ליים
מנגו
תוכן בנושא מנגו
אפרסק
תוכן בנושא אפרסקים
הדוגמה הבאה משתמשת בתחביר Markdown כדי לעבד את אותו תפריט של אפשרויות נוספות.
תפוחים
תוכן בנושא תפוחים
משמשים
תוכן הכולל משמשים
אבוקדו
תוכן על אבוקדו
תאנים
תוכן בנושא תאנים
ענבים
תוכן בנושא ענבים
קייווירוט
תוכן לגבי Kiwifruit
לימונים
תוכן בנושא לימונים
פרוסות ליים
תוכן בנושא ליים
מנגו
תוכן בנושא מנגו
אפרסק
תוכן בנושא אפרסקים
שמות של כרטיסיות כפולות בווידג'טים של כרטיסיות מרובות
לחיצה על כרטיסייה משפיעה על כל הכרטיסיות האחרות בדף, והטקסט זהה באותו התחביר. לדוגמה, לחיצה על תפוחים או על משתמשים בווידג'ט שלמטה תשפיע גם על הווידג'ט השני בקטע הקודם, כי שניהם מבוססים על Markdown.
תפוחים
תוכן נוסף על תפוחים!
משמשים
תוכן נוסף לגבי משמש!
התאמה אישית של ווידג'טים של כרטיסיות
ניתן ליצור את הווידג'ט של הכרטיסיות באמצעות Markdown, אבל צריך להשתמש בתחביר HTML כדי להקצות מאפיינים מותאמים אישית.
גלישת טקסט בתוך כרטיסייה
טקסט שגודלו חורג מהרוחב המקסימלי של כרטיסייה שהוגדרה על ידי כלי הפיתוח באתר הוא בעל חיתוך ויתווסף עם שלוש נקודות. הדוגמה הבאה משתמשת במחלקה two-line-tab בתוך האלמנט המותאם אישית <devsite-selector> כדי לעטוף טקסט בכרטיסייה השנייה.
זוהי תווית ארוכה שלא עוטפת
תווית זו לא עוטפת לשורה אחרת.
התווית הזו תגלוש לשורה שנייה
התווית של הכרטיסייה הזו מופיעה בשורה שנייה.
גלישת טקסט בכרטיסייה עם תווית קטנה יותר
הדוגמה הבאה מגדירה את two-line-tab בשורה הראשונה ואת tab-label
לשורה השנייה בתוך האלמנט המותאם אישית <devsite-selector> כדי להציג תווית קטנה יותר
בשורה השנייה של שורת שתי השורות הנתונים.
Swift
בכרטיסייה הזו מופיעה התווית Swift.
Java
לכרטיסייה הזו של שתי שורות יש תווית Android קטנה יותר מתחת לתווית Java.
Kotlin
בכרטיסייה הזו, שתי שורות, יש תווית Android קטנה יותר מתחת לתווית Kotlin.
Java
הכרטיסייה הזו מסומנת בתווית Java.
קישור ישיר לכרטיסייה ספציפית
הדוגמה הבאה מקשרת ישירות לכרטיסייה מסוימת ו פותחת אותה. לשם כך יש לציין את id בתוך הרכיב המותאם אישית <devsite-selector>.
קובול
הכרטיסייה הזו היא ברירת המחדל, אך ניתן להשתמש בעוגן #cobol.
Fortran
כדי לקשר ישירות לכרטיסייה הזו, יש לצרף את
#fortran עוגן לקישור שלך.
Haskell
הכרטיסייה הזו תשתמש בעוגן #haskell בקישור שלך.
יצירת קישור שכל הווידג'טים נפתחים באותה כרטיסייה
הקישור הבא מצרף את פרמטר השאילתה ?tab=Apricots לכתובת ה-URL של הדף הזה וטוען את הדף כשכרטיסיית הנכסים פתוחה בכל הבוררים:
https://www.devsitetest.how/integration-tests/Widgets/tabs?tab=Apricots