Un elemento plegable contiene un conmutador que un lector puede usar para mostrar u ocultar el contenido del elemento. Los elementos se pueden contraer agregando la mw-collapsible
clase, o alternativamente usando la plantilla {{ Collapse }}, o sus variantes {{ Collapse top }} y {{ Collapse bottom }}.
La mw-collapsible
clase puede hacer que cualquier elemento sea colapsable, pero las tablas son particularmente simples de hacer colapsable. Agregar la mw-collapsible
clase a una tabla coloca automáticamente el interruptor y selecciona qué partes colapsar.
Un uso común es hacer una tabla de diseño plegable, que siempre muestra una introducción o un resumen, pero oculta el resto del contenido de la vista inmediata. La introducción o el resumen está en la primera fila y el contenido en las filas siguientes. A continuación, se puede acceder fácilmente al contenido mediante el botón "mostrar".
En los ejemplos siguientes, el uso de la clase wikitable
es simplemente para fines de apariencia; no es necesario para mw-collapsible
funcionar.
Código ingresado | Salida producida |
---|
{| role = "presentación" class = "wikitable mw-collapsible"| Lorem ipsum | -| Lorem ipsum dolor sit amet|} | Lorem ipsum | Lorem ipsum dolor sit amet |
|
Las tablas de datos más complejas también se pueden contraer.
Código ingresado | Salida producida |
---|
{| class = "wikitable mw-collapsible"| + clase = "nowrap" | Juegos olímpicos de invierno| -|! alcance = "col" | Ciudad! alcance = "col" | País| -! alcance = "fila" | 1994| Lillehammer || Noruega| -! alcance = "fila" | 1998| Nagano || Japón|} | Juegos olímpicos de invierno | Ciudad | País |
---|
1994 | Lillehammer | Noruega |
---|
1998 | Nagano | Japón |
---|
|
El solo uso de la mw-collapsible
clase deja el elemento expandido de forma predeterminada, pero el lector puede contraerlo. También es posible hacer que el elemento se contraiga de forma predeterminada y, opcionalmente, se expanda. Existen varios métodos para hacer esto, dependiendo de las situaciones en las que desee que el elemento colapse.
"mw-collapsed"
Agregar la mw-collapsed
clase hará que el elemento siempre se contraiga inicialmente, sin importar lo que suceda a su alrededor. Es el método más simple para hacerlo. Usando los ejemplos anteriores:
Código ingresado | Salida producida |
---|
{| role = "presentación" class = "wikitable mw-collapsible mw-collapsed"| Lorem ipsum | -| Lorem ipsum dolor sit amet|} | Lorem ipsum | Lorem ipsum dolor sit amet |
|
{| class = "wikitable mw-collapsible mw-collapsed"| + clase = "nowrap" | Juegos olímpicos de invierno| -|! alcance = "col" | Ciudad! alcance = "col" | País| -! alcance = "fila" | 1994| Lillehammer || Noruega| -! alcance = "fila" | 1998| Nagano || Japón|} | Juegos olímpicos de invierno | Ciudad | País |
---|
1994 | Lillehammer | Noruega |
---|
1998 | Nagano | Japón |
---|
|
"colapso automático"
Agregar la autocollapse
clase hace que un elemento colapse si hay 2 o más elementos colapsables en la página. Este umbral puede ser diferente en otros proyectos y es personalizable . Por lo tanto, el ejemplo siguiente se colapsa porque hay numerosos elementos colapsables en esta página.
Código ingresado | Salida producida |
---|
{| role = "presentación" class = "wikitable mw-collapsible autocollapse"| Lorem ipsum | -| Lorem ipsum dolor sit amet|} | Lorem ipsum | Lorem ipsum dolor sit amet |
|
"innercollapse" y "externalcollapse"
Usando este par de clases, es posible hacer que un elemento se colapse de forma predeterminada solo cuando está contenido dentro de un elemento externo en particular. Un elemento con las clases mw-collapsible
y innercollapse
se contrae de forma predeterminada si está contenido dentro de un elemento con la outercollapse
clase; de lo contrario, no se contrae de forma predeterminada. Esto es principalmente útil para las plantillas, que a menudo están anidadas.
Código ingresado | Salida producida |
---|
{| role = "presentación" class = "wikitable mw-collapsible innercollapse"| Este elemento < code > innercollapse code > es| -| < em > sin colapsar em > por defecto|}< div class = "wikitable externalcollapse" style = "padding: 1em; background: #ccc;" >
Este es un elemento con la clase < code > outercollapse code > .{| role = "presentación" class = "wikitable mw-collapsible innercollapse"| Este elemento < code > innercollapse code > es| -| < em > contraído em > por defecto|}div > | Este innercollapse elemento es | no colapsado por defecto |
Este es un elemento de la outercollapse clase. Este innercollapse elemento es | colapsado por defecto |
|
Tablas con subtítulos
Una tabla sin título se colapsará en su primera fila. Una tabla con un título se colapsará a su título, sin filas, por lo tanto, sin ancho. Utilice class="nowrap"
o {{ nowrap }} para evitar que el título se apriete en una columna vertical cuando la tabla se contraiga.
Código ingresado | Salida producida |
---|
{| class = "wikitable ordenable mw-collapsible" | + clase = "nowrap" | Título de tabla algo largo! Nombre !! Puntaje| -| John || 59| -| Bob || 72|} | Título de tabla algo largo Nombre | Puntaje |
---|
John | 59 | Beto | 72 | |
Tablas clasificables
Las tablas plegables se pueden combinar con la funcionalidad de tablas clasificables sin dificultad. Sin embargo, debido a que el botón ocultar / mostrar se coloca collapsible
en la primera celda de encabezado ubicada o mw-collapsible
en la celda de encabezado derecha (esta diferencia puede cambiar ), su posición puede parecer un poco peculiar si la celda no es lo suficientemente ancha:
Código ingresado | Salida producida |
---|
{| class = "wikitable mw-collapsible sortable" style = "width: 5em"| -! Nombre !! Puntaje| -| John || 59| -| Bob || 72|} | Nombre | Puntaje |
---|
John | 59 | Beto | 72 |
|
Una posible alternativa es agregar un título sobre la mesa. Vea el siguiente ejemplo.
Código ingresado | Salida producida |
---|
{| class = "wikitable ordenable mw-collapsible" | + clase = "nowrap" | Subtítulo! Nombre !! Puntaje| -| John || 59| -| Bob || 72|} | Subtítulo Nombre | Puntaje |
---|
John | 59 | Beto | 72 | |
Personalización
Los usuarios registrados pueden editar su archivo js personal para cambiar algunas de las variables utilizadas.
autoCollapse = 4 // cuántas tablas plegables en la página antes de que funcione el autocollapse (predeterminado = 2) var collapseCaption = 'collapse' // texto del enlace [ocultar] (predeterminado = 'ocultar') var expandCaption = 'uncollapse' // texto del enlace [mostrar] (predeterminado = 'mostrar')
Limitaciones
- Esta funcionalidad requiere que el navegador del usuario final tenga habilitado JavaScript . Si JavaScript está deshabilitado, el comportamiento predeterminado es mostrar el contenido.
- Tampoco funciona en navegadores móviles (o navegadores de escritorio en modo móvil).