wiki-List-Graph

Ver en Git

---

List Graph

ListGraph es un componente flexible que permite renderizar listas personalizables o listas de pares clave-valor. Está diseñado para ser altamente configurable mediante props, adaptándose a diferentes casos de uso.

Referencia de la API

Propiedad	Tipo	Descripción	Opcional	Valores posibles
children	ReactNode o Array<{ label: string, value: string, key?: string }>	Contenido del componente. Puede ser cualquier nodo React o una lista de objetos clave-valor.	No (según type)	-
style	CSSProperties	Estilos CSS en línea para el componente.	Sí	-
lazyLoading	'client' | false	Controla el comportamiento de carga diferida.	Sí	'client', false
className	string	Clases CSS adicionales para el componente principal.	Sí	-
id	string	Identificador único del componente.	Sí	-
size	'big' | 'normal' | 'small'	Tamaño del componente.	Sí	'big', 'normal', 'small'
aura-test	string	Etiqueta para pruebas automatizadas.	Sí	-
type	'custom' | 'key-value' | 'KEY-VALUE'	Determina el tipo de contenido a renderizar.	Sí	'custom', 'key-value', 'KEY-VALUE'

Notas sobre las propiedades

• Si type es 'key-value' o 'KEY-VALUE', children debe ser un array de objetos con las claves label, value y opcionalmente key.
• El valor 'KEY-VALUE' está deprecado, pero se admite con una advertencia en consola.

Ejemplo de uso

Lista personalizada

import { ListGraph } from '@auravant/ui-kit';

<ListGraph type="custom" size="normal" className="custom-class">
 <div>Elemento personalizado 1</div>
 <div>Elemento personalizado 2</div>
 <div>Elemento personalizado 3</div>
</ListGraph>;

Lista de pares clave-valor

import { ListGraph } from '@auravant/ui-kit';

const data = [
 { label: 'Nombre', value: 'John Doe', key: '1' },
 { label: 'Edad', value: '21 años', key: '2' },
 { label: 'Ocupación', value: 'Desarrollador', key: '3' },
];

export const KeyValueListExample = () => (
 <ListGraph type="key-value" size="small" lazyLoading="client">
 {data}
 </ListGraph>
);

Notas adicionales

• Para listas de pares clave-valor, se renderizan elementos estilizados con etiquetas (label) y valores (value).
• Es posible personalizar completamente los estilos mediante la propiedad className o pasando un objeto style.