Разширяемата джаджа използва персонализирания елемент <devsite-expandable> за да позволи на потребителите да скрият или покажат части от съдържанието в разширяема секция. Във файл Markdown обвийте персонализирания елемент със стандартен HTML елемент, като например <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 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
още...Duis aute irure dolor in reprehenderit in voluptate 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 ID към персонализирания елемент <devsite-expandable> , който автоматично разширява раздела при зареждане на страницата, когато се свържете към него.
Как да се разшири автоматично при свързване
Затворете тази разширяема секция, щракнете върху връзката #sample1 по-горе, след което презаредете страницата, за да разширите автоматично тази разширяема секция.
Code block within the 'Auto-expand on linking' demo.
Отворено по подразбиране
Следващият пример добавя expanded атрибут към персонализирания елемент <devsite-expandable> , за да направи разширяемия отворен по подразбиране.
Разширено по подразбиране
Отваряне по подразбиране е страхотно, когато имате много разширяеми, като например бележки за изданието, но искате да запазите най-новата отворена.