## Collapse Use Collapse para almacenar contenidos. ### Uso básico Puede 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 slots con nombre, 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 | | --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- | | value / v-model | panel activo | string (modo acordeón) / array (No modo acordeón) | — | — | | accordion | especifica si activa el modo acordeón | boolean | — | false | ### 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 | — | — |