הווידג'ט שניתן להרחבה משתמש ברכיב המותאם אישית <devsite-expandable> כדי לאפשר למשתמשים להסתיר או להציג חלקים של תוכן בקטע שניתן להרחבה. ב-Markdown
את הרכיב המותאם אישית, כמו
<section> או <div>.
החלפת מצב של קטע
הדוגמה הבאה מוקפת ברכיב מותאם אישית <devsite-expandable> ש
ברירת המחדל היא מיקום מוסתר. בכותרת שלו יש מאפיין class בשם
showalways.
הכותרת הזו תמיד מוצגת
כברירת מחדל, המיקום של הפסקה הזו הוא מוסתר.
This code block within the custom element also defaults to a hidden
position.
אמצעי בקרה בהתאמה אישית
הדוגמה הבאה מוסיפה את המחלקה expand-control לרכיב button של
הרכיב המותאם אישית <devsite-expandable> כדי להרחיב ולכווץ את הקטע
בלי מתג.
יש הרבה אפשרויות
הרחבה פעם אחת
הדוגמה הבאה מוסיפה את המחלקה expand-control once לקישור בתוך
רכיב <devsite-expandable> מותאם אישית שמציג תוכן נוסף כשלוחצים עליו
ואז נעלם מהדף.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad Mini veniam, quis nostrud exerration ullamco laboris nisi ut aliquip ex ea commodo consequat.
עוד...Duis aute irure dolor in reprehenderit in voluptated velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
הרחבה אוטומטית בזמן קישור
הדוגמה הבאה מוסיפה מזהה #sample1 אל
רכיב <devsite-expandable> מותאם אישית שמרחיב באופן אוטומטי את הקטע בזמן טעינת הדף
כשמקשרים אליו.
איך להרחיב באופן אוטומטי אחרי קישור
סוגרים את הקטע המתרחב הזה, לוחצים על הקישור #sample1 שלמעלה. לאחר מכן צריך לטעון מחדש את הדף כדי להרחיב באופן אוטומטי את הקטע המתרחב הזה.
Code block within the 'Auto-expand on linking' demo.
פתיחה כברירת מחדל
הדוגמה הבאה מוסיפה את המאפיין expanded
רכיב מותאם אישית <devsite-expandable> שהופך את הישות המתרחבת לפתיחה כברירת מחדל.
מורחבים כברירת מחדל
פתיחה כברירת מחדל היא פתרון מצוין כשיש הרבה פריטים שניתן להרחיב, כמו הערות לגרסה, אבל רוצים שהפריט האחרון יישאר פתוח.