El giny ampliable utilitza l'element personalitzat <devsite-expandable> per permetre als usuaris amagar o mostrar porcions de contingut en una secció ampliable. En un fitxer Markdown, embolcalla l'element personalitzat amb un element HTML estàndard, com ara <section> o <div> .
Canvi de secció
L'exemple següent està embolicat en un element personalitzat <devsite-expandable> que es troba per defecte en una posició oculta. El seu encapçalament té un atribut class anomenat showalways .
Aquest encapçalament sempre es mostra
Aquest paràgraf té una posició oculta per defecte.
This code block within the custom element also defaults to a hidden
position.Control personalitzat
L'exemple següent afegeix la classe expand-control a l'element button de l'element personalitzat <devsite-expandable> per expandir i replegar la secció sense commutar.
Hi ha moltes opcions disponibles
Ampliar una vegada
L'exemple següent afegeix la classe expand-control once a un enllaç dins de l'element personalitzat <devsite-expandable> que mostra contingut addicional quan es fa clic i després desapareix de la pàgina.
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.
Més...Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepte sent occaecat cupidatat non proident, sunt in culpa qui officia desert mollit anim id is laborum.
Ampliació automàtica en enllaçar
L'exemple següent afegeix un identificador #sample1 a l'element personalitzat <devsite-expandable> que amplia automàticament la secció a la càrrega de la pàgina quan hi enllaceu.
Com s'expandeix automàticament a l'enllaç
Tanqueu aquesta secció ampliable, feu clic a l'enllaç #sample1 de dalt i torneu a carregar la pàgina per ampliar aquesta secció ampliable automàticament.
Code block within the 'Auto-expand on linking' demo.
Obre per defecte
L'exemple següent afegeix l'atribut expanded a l'element personalitzat <devsite-expandable> per fer que l'ampliable s'obri de manera predeterminada.
Ampliat per defecte
Obrir de manera predeterminada és fantàstic quan teniu molts ampliables, com ara les notes de la versió, però voleu mantenir obert el més recent.