ButtonComponent

Botón de acción.

Propiedades Específicas

ButtonPropertiesComponent:

{  "class": "ButtonPropertiesComponent",  "backgroundColor": "primary",  // primary, accent, warn, o color hex  "classType": "mat-raised-button",  "icon": "save",  "width": null,  // 0-100 (porcentaje)  "height": null  // 0-100 (porcentaje)}

Tipos de Botón (classType)

• "mat-button": Botón plano
• "mat-raised-button": Botón elevado (por defecto)
• "mat-stroked-button": Botón con borde
• "mat-flat-button": Botón plano con color
• "mat-icon-button": Botón solo con ícono
• "mat-fab": Botón flotante grande
• "mat-mini-fab": Botón flotante pequeño

Colores Disponibles

• "primary": Color primario del tema
• "accent": Color de acento
• "warn": Color de advertencia
• O cualquier color hex: "#667eea"

Ejemplo: Botón Guardar

{  "name": "BtnGuardar",  "component": "ButtonComponent",  "x": 2,  "y": 10,  "rows": 1,  "cols": 2,  "props": [    {      "class": "BasicPropertiesComponent",      "name": "BtnGuardar",      "label": "Guardar",      "enabled": true,      "visible": true    },    {      "class": "ButtonPropertiesComponent",      "backgroundColor": "primary",      "classType": "mat-raised-button",      "icon": "save",      "width": null,      "height": null    },    {      "class": "CustomCodePropertiesComponent",      "events": [        {          "eventType": "Click",          "eventTypeNum": "1",          "code": "if (this.executeValidations()) {\\n  this.executeDataSource('GuardarDatos');\\n} else {\\n  alert('Complete todos los campos requeridos');\\n}"        }      ],      "basicEvent": 1,      "executeValidation": true    }  ]}