1. 组件简介

Mx Antd Button：基于 Ant Design Button 组件封装的 Mendix Pluggable Widget，标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

2. Mx Antd Button 组件

Button 组件的设计基于Ant Design的Button组件,采用了Ant Design简洁明快的设计风格和色彩规范，以适应更丰富的Mendix使用场景。丰富的按钮类型，使页面可以实现更丰富的视觉层次和细节设计，这些不同的类型和尺寸使开发者可以很方便地选择和使用合适的按钮，来满足各种操作和页面的需求。

简单操作示例如下：

这个 Demo 项目可以通过这个链接访问：Mendix Antd Widget Demo

组件 Github Repo 在这里，如有需要您也可以基于源码进行个性化定制或联系我们：Github Repo

2.1. 组件功能特性

1. 在 Ant Design 中我们提供了五种按钮。

   • 主按钮（Primary）：用于主行动点，一个操作区域只能有一个主按钮。
   • 默认按钮（Default）：用于没有主次之分的一组行动点。
   • 虚线按钮（Dashed）：常用于添加操作。
   • 文本按钮（Text）：用于最次级的行动点。
   • 链接按钮（Link）：一般用于链接，即导航至某位置。

2. 以及三种状态属性与上面配合使用。

   • 危险（Danger）：删除/移动/修改权限等危险操作，一般需要二次确认。
   • 幽灵（Ghost）：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
   • 禁用（Disabled）：行动点不可用的时候，一般需要文案解释。

3. 提供大中小三种尺寸级别。

4. 提供默认（Default）、圆形（Circle）和圆角（Round）三种形状选项。

5. 提供 Block 设置用于实现父容器全宽按钮。

2.2. 组件安装和使用

1. 从 Marketplace 或 Github Release 下载 mpk 文件并添加到项目目录下 {YourMendixProjectFolder}/widgets/，或在 Studio Pro 中直接通过 Marketplace 下载。
2. 选择任意页面，向页面添加一个 Antd Button。
3. 为该组件设置必要的属性。包括： Caption, Type, Shape, Size, Block , OnClick Event 等。
4. 运行和确认效果。

2.3. 组件配置项说明

Main Section

• Caption：按钮文本。
• Button Type：设置按钮类型。
• Button Shape：设置按钮形状。
• Button Size：设置按钮大小
• Button Block：设置是否为全宽按钮。

Status Section

• Disabled：是否禁用按钮事件，默认为No.
• Danger：是否为危险按钮，默认为No.
• Ghost：是否为幽灵按钮，默认为No.

Event Section

• OnClick Event：点击按钮事件。

组件项目所属工程

这是我们团队 Gavin 在从西门子 Mendix 团队离职前封装开发的 Mx Antd Button 及 Popconfirm 组件，是 Mendix 中国团队牵头的 Mendix-Antd 项目的一部分，这个项目努力将 antd 部件带到 Mendix 世界，以帮助 Mendix 开发者更专注于业务功能，而不是 UI 部件的实现。

项目 Github 地址：Mendix Antd Widget Show

项目 Demo 演示地址：Mendix Antd Widget Demo