## Collapse Use Collapse para almacenar contenidos. ### Uso básico Puedes expandir varios paneles :::demo ```html

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

``` ::: ### Acordeón En modo acordeón sólo un panel puede ser expandido a la vez :::demo Activa el modo acordeón usado el atributo `accordion`. ```html

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

``` ::: ### Título personalizado Además de usar el atributo `title`, se puede personalizar el título del panel con named slots, esto hace posible agregar contenido personalizado, por ejemplo: iconos. :::demo ```html

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

``` ::: ### Atributos de Collapse | Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | | accordion | especifica si activa el modo acordeón | boolean | — | false | | value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — | ### Eventos de Collapse | Nombre de Evento | Descripción | Parametros | |---------|---------|---------| | change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) | ### Atributos de Collapse Item | Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | |---------- |-------------- |---------- |-------------------------------- |-------- | | name | identificador único del panel | string/number | — | — | | title | título del panel | string | — | — |