Віджет, що розгортається, використовує спеціальний елемент <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.
Автоматичне розгортання при посиланні
У наступному прикладі до спеціального елемента <devsite-expandable>
додається ідентифікатор #sample1 , який автоматично розгортає розділ під час завантаження сторінки, коли ви на нього посилаєтеся.
Як автоматично розгорнути посилання
Закрийте цей розгорнутий розділ, клацніть посилання #sample1 вище, а потім оновіть сторінку, щоб автоматично розгорнути цей розгорнутий розділ.
Code block within the 'Auto-expand on linking' demo.
Відкрити за умовчанням
У наведеному нижче прикладі атрибут expanded
додається до спеціального елемента <devsite-expandable>
, щоб розширюваний відкрився за замовчуванням.
Розгорнуто за умовчанням
Відкрити за замовчуванням – це чудово, якщо у вас є багато розширюваних, наприклад для приміток до випуску, але ви хочете залишити відкритим останній.