1. 组件简介

Mx Antd PopConfirm：基于 Ant Design PopConfirm 组件封装的 Mendix Pluggable Widget，提供功能完备的弹出式浮动确认对话框。和弹出式的全屏居中模态对话框相比，交互形式更轻量。

2. Mx Antd PopConfirm 组件

PopConfirm 组件的目标是提供一个简单的弹窗确认框，开发者可以将需要用户确认的操作通过这个组件实现。它的设计也基于Ant Design，采用了Ant Design简洁的弹窗设计和交互方式。我们在此基础上,默认提供了“确认”和“取消”两个按钮,开发者可以很容易地通过这个组件，弹出提示用户确认某个操作或决定的弹窗。 这个组件实现了Mendix开发者常见的一个交互需求，简化了原生实现确认弹窗的开发量，使界面设计和交互更加高效和轻快。同时它与Button组件的搭配也能满足大部分基础页面的设计需求。

简单操作示例如下：

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

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

2.1. 组件功能特性

1. 提供基于 Mendix textTemplate 的文本拼装能力渲染对话框标题。
2. 可自定义确认/取消（Confirm/Cancel）按钮文本。
3. 可自定义对话框相对位置（placement），默认包含12种。
4. 可自定义对话框 CSS 样式，通过配置项中的 Class Name 引入。
5. 除默认带双按钮的默认样式，可定义仅确认（Confirm）按钮的简化样式。
6. 容器中可容纳多种类型的 Mendix Widget（支持 OnClick 事件即可）。

2.2. 组件安装和使用

1. 从 Marketplace 或 Github Release 下载 mpk 文件并添加到项目目录下 {YourMendixProjectFolder}/widgets/，或在 Studio Pro 中直接通过 Marketplace 下载。
2. 选择任意页面，向页面添加一个 Antd PopConfirm。
3. 向上述 PopConfirm 中添加子组件，可为 Button, Antd Button, Badge, Text, Label 等组件。如需实现动态的 Title 文本，需将 PopConfirm 组件放在一个 Data container 容器组件中。
4. 为该组件设置必要的属性。包括： Title, Placement, Confirm Text, Confirm Event, Cancel Text , Cancel Event。
5. 运行和确认效果。

2.3. 组件配置项说明

General Section

• Title：弹出框标题。
• Disabled：是否禁用弹出框，默认为No.
• Placement：弹出框相对子组件的位置，共12种选项。
• Class Name：弹出框样式。

Confirm Setting Section

• Confirm Text：确认按钮文本。
• On Confirm Event：点击确认按钮事件。

Cancel Setting Section

• Show Cancel：是否展示取消按钮，默认为Yes.
• Cancel Text：取消按钮文本。
• On Cancel Event：点击取消按钮事件。

组件项目所属工程

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

项目 Github 地址：Mendix Antd Widget Show

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