componente · @solu30/ui-kit/display
SectionCard
Tarjeta de sección con encabezado, plegado opcional y contador de errores en el título.
30 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- carlosmartinpavon
- elliot
- gestorsalon
- luigi
- prepchat
- raquetea
La pieza, con lugar de pantalla
Cargando el componente del paquete instalado…
Cómo se usa
import { SectionCard } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| id | opcional | string | Unique id for controlled mode |
| title | opcional | string | — |
| subtitle | opcional | string | — |
| description | opcional | string | — |
| icon | opcional | ReactNode | — |
| isOpen | opcional | boolean | Controlled open state |
| onToggle | opcional | (id: string) => void | Controlled toggle callback |
| collapsible | opcional | boolean | Enable self-managed collapse (uncontrolled mode) |
| defaultCollapsed | opcional | boolean | Start collapsed in uncontrolled mode (default: false = starts open) |
| children | sí | ReactNode | — |
| errorCount | opcional | number | — |
| className | opcional | string | — |
Ejemplo del paquete
// Sin `isOpen` se pliega solo (`collapsible`); con `isOpen` + `onToggle` lo maneja el consumidor,
// y ahí `id` es obligatorio porque es lo que llega al callback.
<SectionCard title="Datos del cliente" collapsible defaultCollapsed errorCount={errores.length}>
<DatosCliente />
</SectionCard>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.