1. コンポーネント紹介
Mx Antd PopConfirm：Ant Design PopConfirmコンポーネントをベースにしたMendixプラグイン可能なウィジェットで、完全な機能を備えたフローティング確認ダイアログを提供します。フルスクリーンで中央に表示されるポップアップモーダルダイアログと比較して、よりライトな対話形式を実現します。
2. Mx Antd PopConfirmコンポーネント
PopConfirmコンポーネントは、開発者がユーザーの確認が必要な操作を実装できるシンプルな確認ダイアログボックスを提供することを目的としています。そのデザインもAnt Designに基づいており、Ant Designのクリーンなダイアログデザインと対話方法を採用しています。この基盤の上に、デフォルトで「確認」と「キャンセル」ボタンを提供し、開発者がこのコンポーネントを通じてユーザーにアクションや決定の確認を促すポップアップを簡単に作成できるようにしています。 このコンポーネントは、Mendix開発者の一般的な対話要件を実装し、ネイティブな確認ダイアログの実装の開発工数を簡素化し、インターフェースデザインと対話をより効率的で軽量にします。同時に、Buttonコンポーネントとの組み合わせにより、ほとんどの基本的なページのデザイン要件を満たすことができます。
簡単な操作例は以下の通りです：
このデモプロジェクトは次のリンクからアクセスできます：Mendix Antd Widget Demo
コンポーネントのGithub Repoはこちらです。必要に応じてこのコンポーネントをベースにカスタマイズすることも、お問い合わせいただくこともできます：Github Repo
2.1. コンポーネントの機能特性
- Mendix textTemplateに基づくテキスト組み立て機能によるダイアログタイトルのレンダリング機能を提供。
- 確認/キャンセル（Confirm/Cancel）ボタンのテキストをカスタマイズ可能。
- ダイアログの相対位置（placement）をカスタマイズ可能、デフォルトで12のオプションを提供。
- 設定項目のClass Nameを通じてダイアログのCSSスタイルをカスタマイズ可能。
- デフォルトの二重ボタンスタイルの他に、確認（Confirm）ボタンのみの簡略化スタイルを定義可能。
- コンテナ内に様々な種類のMendix Widget（OnClickイベントをサポートしているもの）を収容可能。
2.2. コンポーネントのインストールと使用
- MarketplaceまたはGithub Releaseからmpkファイルをダウンロードし、プロジェクトディレクトリ
{YourMendixProjectFolder}/widgets/に追加するか、Studio Proで直接Marketplaceからダウンロードします。 - 任意のページを選択し、
Antd PopConfirmをページに追加します。 - 上記の
PopConfirmに子コンポーネントを追加します。Button、Antd Button、Badge、Text、Labelなどのコンポーネントを使用できます。動的なTitleテキストを実装する場合は、PopConfirmコンポーネントをData containerコンポーネント内に配置する必要があります。
- コンポーネントに必要な属性を設定します。
Title、Placement、Confirm Text、Confirm Event、Cancel Text、Cancel Eventなどを含みます。
- 実行して効果を確認します。
2.3. コンポーネント設定項目の説明
一般セクション
- Title：ダイアログのタイトル。
- Disabled：ダイアログを無効にするかどうか、デフォルトは
No。 - Placement：子コンポーネントに対するダイアログの位置、12のオプションあり。
- Class Name：ダイアログのスタイル。
確認設定セクション
- Confirm Text：確認ボタンのテキスト。
- On Confirm Event：確認ボタンクリックイベント。
キャンセル設定セクション
- 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
プロジェクトデモのデモンストレーションアドレス：Mendix Antd Widget Demo
