1. Introducción al Componente

Mx Antd Button: Un Widget Pluggable de Mendix basado en el componente Button de Ant Design, que marca un único (o encapsula un grupo de) comando de operación, responde al comportamiento de clic del usuario y desencadena la lógica de negocio correspondiente.

2. Componente Mx Antd Button

El diseño del componente Button está basado en el componente Button de Ant Design, adoptando el estilo de diseño limpio y rápido y las especificaciones de color de Ant Design para adaptarse a escenarios de uso más ricos de Mendix. Los diversos tipos de botones permiten que las páginas logren una jerarquía visual más rica y un diseño detallado, y estos diferentes tipos y tamaños facilitan a los desarrolladores seleccionar y usar los botones apropiados para satisfacer las necesidades de varias operaciones y páginas.

Ejemplo de operación simple a continuación:

Este proyecto Demo puede ser accedido a través de este enlace: Demo de Widget Mendix Antd

El Repo Github del componente está aquí, también puede personalizarlo basándose en el código fuente o contactarnos si lo necesita: Repo Github

2.1. Características del Componente

1. Proporcionamos cinco tipos de botones en Ant Design.

   • Botón Primario: Usado para puntos de acción principales, solo se permite un botón primario en un área de operación.
   • Botón por Defecto: Usado para un grupo de puntos de acción sin distinción primaria/secundaria.
   • Botón Discontinuo: Comúnmente usado para operaciones de agregar.
   • Botón de Texto: Usado para los puntos de acción menos importantes.
   • Botón de Enlace: Generalmente usado para enlaces, es decir, navegación a una ubicación.

2. Y tres propiedades de estado para usar en combinación con lo anterior.

   • Peligro: Para operaciones peligrosas como eliminar/mover/modificar permisos, generalmente requiriendo confirmación secundaria.
   • Fantasma: Usado en lugares con colores de fondo complejos, comúnmente usado en página de inicio/página de producto y otros escenarios de visualización.
   • Deshabilitado: Cuando los puntos de acción no están disponibles, generalmente requiriendo explicación de texto.

3. Proporciona tres niveles de tamaño: grande, mediano y pequeño.

4. Proporciona tres opciones de forma: Por Defecto, Círculo y Redondo.

5. Proporciona configuración de Bloque para implementar botones de ancho completo en contenedores padre.

2.2. Instalación y Uso del Componente

1. Descargue el archivo mpk desde Marketplace o Github Release y añádalo al directorio del proyecto {YourMendixProjectFolder}/widgets/, o descárguelo directamente a través de Marketplace en Studio Pro.
2. Seleccione cualquier página y añada un Antd Button a la página.
3. Configure las propiedades necesarias para el componente, incluyendo: Caption, Type, Shape, Size, Block, OnClick Event, etc.
4. Ejecute y verifique el efecto.

2.3. Descripción de Elementos de Configuración del Componente

Sección Principal

• Caption: Texto del botón.
• Button Type: Establece el tipo de botón.
• Button Shape: Establece la forma del botón.
• Button Size: Establece el tamaño del botón.
• Button Block: Establece si es un botón de ancho completo.

Sección de Estado

• Disabled: Si deshabilitar eventos del botón, por defecto es No.
• Danger: Si es un botón de peligro, por defecto es No.
• Ghost: Si es un botón fantasma, por defecto es No.

Sección de Eventos

• OnClick Event: Evento de clic del botón.

Ingeniería del Proyecto del Componente

Este es el componente Mx Antd Button y Popconfirm desarrollado por nuestro miembro del equipo Gavin antes de dejar el equipo Mendix de Siemens. Es parte del proyecto Mendix-Antd liderado por el equipo Mendix China, que se esfuerza por llevar los widgets antd al mundo Mendix para ayudar a los desarrolladores de Mendix a enfocarse más en la funcionalidad del negocio en lugar de la implementación de widgets UI.

Dirección Github del proyecto: Mendix Antd Widget Show

Dirección de demostración Demo del proyecto: Demo de Widget Mendix Antd