Den expanderbara widgeten använder det anpassade elementet <devsite-expandable> för att låta användare dölja eller visa delar av innehållet i en expanderbar sektion. I en Markdown-fil lindar du det anpassade elementet med ett standard HTML-element, till exempel en <section> eller <div> .
Växla mellan avsnitt
Följande exempel är insvept i ett anpassat <devsite-expandable> -element som har en dold position som standard. Dess rubrik har ett class som heter showalways .
Denna rubrik visar sig alltid
Detta stycke har som standard en dold position.
This code block within the custom element also defaults to a hidden
position.Anpassad kontroll
Följande exempel lägger till klassen expand-control till button i det anpassade elementet <devsite-expandable> för att expandera och komprimera avsnittet utan en växling.
Många alternativ finns tillgängliga
Expandera en gång
Följande exempel lägger till klassen expand-control once till en länk i det anpassade elementet <devsite-expandable> som visar ytterligare innehåll när det klickas och sedan försvinner från sidan.
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.
Mer...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.
Utöka automatiskt vid länkning
Följande exempel lägger till ett #sample1 ID till det anpassade elementet <devsite-expandable> som automatiskt expanderar avsnittet om sidladdning när du länkar till det.
Hur man autoexpanderar vid länkning
Stäng det expanderbara avsnittet, klicka på länken #sample1 ovan och ladda sedan om sidan för att automatiskt expandera det här expanderbara avsnittet.
Code block within the 'Auto-expand on linking' demo.
Öppna som standard
Följande exempel lägger till det expanded attributet till det anpassade elementet <devsite-expandable> för att göra det expanderbara öppet som standard.
Utökad som standard
Öppna som standard är bra när du har många expanderbara filer, till exempel för release notes, men du vill behålla den senaste öppen.