componente · @solu30/ui-kit/display
EntityDetailsPanel
Panel de detalle de una entidad, con secciones plegables, acciones y estados de carga y de error.
3 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- elliot
- luigi
La pieza, con lugar de pantalla
Cargando el componente del paquete instalado…
Cómo se usa
import { EntityDetailsPanel } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| entity | sí | T | null | undefined | NO SE RENDERIZA. El panel no lee un solo campo de esta entidad: todo lo que se ve sale de `title`, `subtitle`, `header`, `sections` y `actions`, que arma el host. Lo único que hace `entity` es decidir si hay algo que mostrar — nula o indefinida, el panel pinta el estado de error con `errorMessage`, igual que con `isError`. Está tipada como `T` y no como `boolean` porque el host casi siempre tiene la entidad a mano y así no inventa un flag; pasar `null` mientras carga o no existe es el uso correcto, y `T` puede ser cualquier cosa. |
| title | sí | string | — |
| subtitle | opcional | string | — |
| header | opcional | ReactNode | — |
| sections | sí | PanelSection[] | — |
| actions | opcional | ReactNode | — |
| onClose | opcional | () => void | — |
| isLoading | opcional | boolean | — |
| isError | opcional | boolean | — |
| errorMessage | opcional | string | — |
| hideHeader | opcional | boolean | — |
| className | opcional | string | — |
| maxHeight | opcional | string | — |
Ejemplo del paquete
// `entity` en null/undefined pinta el estado de error: es lo único que se lee de ella.
<EntityDetailsPanel
entity={reserva}
title={reserva?.cliente ?? ''}
sections={[{ id: 'datos', title: 'Datos', content: <DatosReserva r={reserva} />, defaultExpanded: true }]}
isLoading={cargando}
onClose={cerrar}
/>Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.