El Expansion Panel es un componente diseñado para agrupar flujos complejos o formularios en secciones plegables. Permite la exposición progresiva de datos, logrando que el usuario visualice y complete tareas extensas de manera segmentada sin perder el contexto general del proceso. Su encabezado es clave para mostrar estados de avance o resúmenes de la información cargada.
Es la persona que tenga un porcentaje accionario mayor al 10%
Paso 1: importá estilos globales y el componente desde la librería.
1import 'nave-ui-library/styles.css'2import { ExpansionPanel } from 'nave-ui-library/react'Ejemplo base listo para copiar y pegar en una pantalla real.
Es la persona que tenga un porcentaje accionario mayor al 10%
Es la persona que sea presidenta, vicepresidenta o directora de la empresa
Es la persona que tenga un porcentaje accionario mayor al 10%
Props principales del componente ExpansionPanel.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Expansion Panel title. |
description | string | — | Expansion Panel description. |
size | string | small | small | medium. |
status | string | incomplete | incomplete | complete | blocked |
btnLabel | string | — | Button label. |
children | React.ReactNode | — | Component children. |
isDisabled | boolean | — | Enable or Disable the Button. |
onSubmit | () => void | — | Callback function that is activated when the button is clicked. |
tokensreq | Partial<ThemeTokensBase> | — | Overrides locales de estilo/tokens por instancia. |
1{2 "name": "Expansion Panel",3 "description": "El Expansion Panel es un componente diseñado para agrupar flujos complejos o formularios en secciones plegables.",4 "component": "ExpansionPanel",5 "files": [6 "components/base/data-display/disclosure/ExpansionPanel.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "string",14 "required": true,15 "description": "Expansion Panel title."16 },17 "description": {18 "type": "string",19 "required": true,20 "description": "Expansion Panel description."21 },22 "size": {23 "type": "string",24 "default": "small",25 "description": "small | medium."26 },27 "status": {28 "type": "string",29 "default": "incomplete",30 "description": "incomplete | complete | blocked"31 },32 "btnLabel": {33 "type": "string",34 "description": "Button label."35 },36 "children": {37 "type": "React.ReactNode",38 "required": false,39 "description": "Component children."40 },41 "isDisabled": {42 "type": "boolean",43 "required": false,44 "description": "Enable or Disable the Button."45 },46 "onSubmit": {47 "type": "() => void",48 "required": true,49 "description": "Callback function that is activated when the button is clicked."50 }51 }52}