Расширяемый виджет использует пользовательский элемент <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 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat.
Более...Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not 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.
Открыто по умолчанию
В следующем примере к пользовательскому элементу <devsite-expandable> добавляется expanded атрибут, чтобы расширяемый элемент открывался по умолчанию.
Расширено по умолчанию
Открыть по умолчанию удобно, если у вас много расширяемых элементов, например примечаний к выпуску, но вы хотите, чтобы самый последний из них оставался открытым.