wiki-Collapse

Ver en Git

---

Collapse

El componente Collapse es utilizado para mostrar una lista de elementos colapsables, permitiendo que el usuario expanda o colapse secciones de contenido.

Referencia de la API

Propiedad	Tipo	Predeterminado	Descripción
activeKey	IKey (opcional)	[]	Claves de los ítems activos. Puede ser un arreglo de string[] o number[].
onChange	(active: IKey) => void (opcional)	undefined	Función que se llama cuando cambia el estado de los ítems colapsables, proporcionando las claves activas.
items	ICollapseItemProps[]	undefined	Un arreglo de objetos que representan los ítems que se mostrarán en el Collapse.
showArrow	boolean	false	Si es true, mostrará una flecha junto al título de cada ítem para indicar su estado (colapsado/expandido).
className	string (opcional)	undefined	Clase CSS adicional para aplicar al contenedor del componente.
aura-test	string (opcional)	'collapse'	Identificador para pruebas automatizadas (por ejemplo, con herramientas como Cypress).

Props del Componente CollapseItem

Propiedad	Tipo	Predeterminado	Descripción
key	string | number	undefined	Clave única que identifica al ítem dentro del Collapse.
label	string (opcional)	undefined	Título que se muestra en el ítem.
renderLabel	(arrowIcon: JSX.Element) => JSX.Element (opcional)	undefined	Función para personalizar la renderización de la etiqueta del ítem, recibiendo un ícono de flecha.
showArrow	boolean (opcional)	true	Si es true, se mostrará una flecha para indicar el estado expandido o colapsado del ítem.
active	boolean (opcional)	false	Determina si el ítem está expandido o colapsado.
onClick	() => void (opcional)	undefined	Función que se ejecuta cuando el usuario hace clic en el ítem.
children	ReactNode (opcional)	undefined	Contenido que se muestra cuando el ítem está expandido.
className	string (opcional)	undefined	Clase CSS adicional para aplicar al ítem.
aura-test	string (opcional)	'collapse-item'	Identificador para pruebas automatizadas.

Ejemplo de Uso

import { useState } from 'react';
import { Collapse, IKey } from '@auravant/ui-kit';

const items = [
 { key: 1, label: 'item 1', children: 'Contenido del item 1' },
 { key: 2, label: 'item 2', children: 'Contenido del item 2' },
 { key: 3, label: 'item 3', children: 'Contenido del item 3' },
];

export const CollapseExample = () => {
 const [activeKeys, setActiveKeys] = useState<IKey>([1]);

 const handleChange = (active: IKey) => {
 setActiveKeys(active);
 };

 return (
 <Collapse
 activeKey={activeKeys}
 onChange={handleChange}
 showArrow={true}
 items={items}
 />
 );
};