CollapseCollapse
El componente Collapse se usa para agrupar y ocultar áreas de contenido complejas para mantener la página ordenada.
Ten en cuenta que el componente Collapse no incluye ningún estilo por sí mismo; debes añadir tus propios estilos o usarlo junto con otros componentes.
Importa los componentes cuando los necesites:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Importa los tipos TypeScript cuando los necesites:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Uso:
primer contenido
segundo contenido
<mdui-collapse>
<mdui-collapse-item header="primer encabezado">primer contenido</mdui-collapse-item>
<mdui-collapse-item header="segundo encabezado">segundo contenido</mdui-collapse-item>
</mdui-collapse>
Puedes establecer el texto del encabezado del panel usando el atributo header del componente <mdui-collapse-item>, o especificar el elemento del encabezado mediante el slot header. El slot por defecto del componente se usa para el contenido del panel.
Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fuente
El atributo accordion al componente <mdui-collapse> para activar el modo acordeón, de modo que solo un panel esté abierto a la vez.
Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fuente
Con el atributo value del componente <mdui-collapse> puedes obtener el panel abierto en ese momento o indicar qué panel debe abrirse.
En modo acordeón, el valor del atributo value es una cadena. Puedes usar el atributo HTML o la propiedad JavaScript para operar este atributo. En modo no acordeón, el valor del atributo value es un array, que solo se puede operar mediante la propiedad JavaScript.
Modo acordeón
Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
Modo no acordeón
Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
<mdui-list>
<mdui-list-subheader>Modo acordeón</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Modo no acordeón</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["item-1", "item-2"];
</script>
Fuente
Añade el atributo disabled al componente <mdui-collapse> para deshabilitar todo el grupo de paneles. De manera similar, añadiendo el atributo disabled al componente <mdui-collapse-item> deshabilita un panel específico.
Todo deshabilitado
Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
Deshabilitar el primer panel
Elemento 1
Elemento 1 - subelemento
Elemento 2
Elemento 2 - subelemento
<mdui-list>
<mdui-list-subheader>Todo deshabilitado</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Deshabilitar el primer panel</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Elemento 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Elemento 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 2 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fuente
Por defecto, hacer clic en toda el área del encabezado del panel activa el colapso. También puedes definir qué elemento activa el colapso estableciendo el atributo trigger del componente <mdui-collapse-item>. El atributo trigger puede ser un selector CSS o un elemento DOM.
Elemento 1
Elemento 1 - subelemento
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Elemento 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Elemento 1 - subelemento</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fuente| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
value | value | | string | - |
Valor de este elemento de Collapse.
|
Texto del encabezado de este elemento de Collapse.
|
disabled | disabled | | boolean | false |
Indica si el elemento de Collapse está deshabilitado.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Al hacer clic en este elemento se activa el colapso. El valor puede ser un selector CSS, un elemento DOM o un objeto JQ. Por defecto, se activa al hacer clic en toda el área del encabezado.
|
| Nombre |
|---|
open |
Se dispara cuando comienza a abrirse.
|
opened |
Se dispara cuando la animación de apertura se completa.
|
close |
Se dispara cuando comienza a cerrarse.
|
closed |
Se dispara cuando la animación de cierre se completa.
|
| Nombre |
|---|
| (predeterminado) |
Contenido del cuerpo del elemento de Collapse.
|
Contenido del encabezado del elemento de Collapse.
|
| Nombre |
|---|
Contenido del encabezado del Collapse.
|
body |
Contenido del cuerpo del Collapse.
|
| Atributo | Propiedad | Reflect | Tipo | Predeterminado |
|---|
accordion | accordion | | boolean | false |
Indica si el modo acordeón está habilitado.
|
value | value | | string | string[] | - |
Valor del <mdui-collapse-item> actualmente expandido.
Nota: El atributo HTML de esta propiedad siempre es una cadena, y solo se puede establecer un valor inicial cuando accordion es true. El valor de la propiedad de JavaScript es una cadena cuando accordion es true, y es un array de cadenas cuando accordion es false. Por lo tanto, cuando accordion es false, solo se puede cambiar este valor modificando la propiedad de JavaScript.
|
disabled | disabled | | boolean | false |
Indica si el Collapse está deshabilitado.
|
| Nombre |
|---|
change |
Se dispara cuando cambia el elemento del Collapse actualmente expandido.
|
Capítulo anterior
CircularProgress Progreso circular
Capítulo siguiente
Dialog Diálogo
