El widget desplegable usa el elemento personalizado <devsite-expandable> para permitir que los usuarios oculten o muestren partes del contenido en una sección desplegable. En un Markdown
, une el elemento personalizado con un elemento HTML estándar, como un
<section> o <div>.
Activar o desactivar sección
El siguiente ejemplo se une en un elemento personalizado <devsite-expandable> que, de forma predeterminada, tiene una posición oculta. Su encabezado tiene un atributo class llamado showalways.
Este encabezado siempre se muestra
De forma predeterminada, este párrafo se encuentra en una posición oculta.
This code block within the custom element also defaults to a hidden
position.
Control personalizado
En el siguiente ejemplo, se agrega la clase expand-control al elemento button del elemento personalizado <devsite-expandable> para expandir y contraer la sección sin un botón de activación.
Hay muchas opciones disponibles
Expandir una vez
En el siguiente ejemplo, se agrega la clase expand-control once a un vínculo en el
Elemento personalizado <devsite-expandable> que muestra contenido adicional cuando se hace clic en él
y luego desaparece 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Expansión automática en la vinculación
En el siguiente ejemplo, se agrega un ID #sample1 al elemento personalizado <devsite-expandable> que expande automáticamente la sección cuando se carga la página y se agrega un vínculo a ella.
Cómo expandir automáticamente la vinculación
Cierra esta sección desplegable, haz clic en el vínculo #sample1 anterior. Luego, vuelve a cargar la página para expandir automáticamente esta sección expandible.
Code block within the 'Auto-expand on linking' demo.
Abrir de forma predeterminada
En el siguiente ejemplo, se agrega el atributo expanded al
Elemento personalizado <devsite-expandable> para que el anuncio expandible se abra de forma predeterminada.
Expandido de forma predeterminada
La opción de abrir de forma predeterminada es excelente cuando tienes muchos elementos expandibles, como las notas de la versión, pero quieres mantener abierta la más reciente.