Contenedor para agrupar controles.
ContainerPropertiesComponent:
{ "class": "ContainerPropertiesComponent", "borderColor": "#CCCCCC", "borderWidth": 1, "borderStyle": "solid", // solid, dashed, dotted, none "borderRadius": 4, "padding": 10}
{ "name": "CntDatosPersonales", "component": "ContainerComponent", "x": 0, "y": 1, "rows": 4, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "CntDatosPersonales", "label": "Datos Personales", "backgroundColor": "#F9FAFB" }, { "class": "ContainerPropertiesComponent", "borderColor": "#E5E7EB", "borderWidth": 1, "borderStyle": "solid", "borderRadius": 8, "padding": 15 } ], "children": [ { "name": "TxtNombre", "component": "InputTextboxComponent", "x": 0, "y": 0, "rows": 1, "cols": 3, "props": [...] } ]}
Tarjeta Material Design.
CardPropertiesComponent:
{ "class": "CardPropertiesComponent", "showHeader": true, "headerTitle": "Título de la Tarjeta", "showFooter": false, "elevation": 2 // 0-24 (sombra)}
{ "name": "CardResumen", "component": "CardComponent", "x": 0, "y": 5, "rows": 3, "cols": 6, "props": [ { "class": "BasicPropertiesComponent", "name": "CardResumen", "backgroundColor": "#FFFFFF" }, { "class": "CardPropertiesComponent", "showHeader": true, "headerTitle": "Resumen de Solicitud", "showFooter": true, "elevation": 4 } ], "children": [...]}
Pestañas para organizar contenido.
TabPropertiesComponent: