1. コンポーネント紹介
Mx Antd Button：Ant Design Buttonコンポーネントをベースにしたプラグイン可能なMendixウィジェットで、単一の（または複数の）操作コマンドをマークし、ユーザーのクリック動作に応答し、対応するビジネスロジックをトリガーします。
2. Mx Antd Buttonコンポーネント
Buttonコンポーネントのデザインは、Ant DesignのButtonコンポーネントに基づいており、Ant Designのクリーンで迅速なデザインスタイルと色彩規範を採用して、より豊かなMendixの使用シーンに適応します。豊富なボタンタイプにより、ページはより豊かな視覚的階層と詳細なデザインを実現でき、これらの異なるタイプとサイズにより、開発者は様々な操作とページのニーズを満たす適切なボタンを簡単に選択して使用できます。
簡単な操作例は以下の通りです：
このデモプロジェクトは次のリンクからアクセスできます：Mendix Antd Widget Demo
コンポーネントのGithub Repoはこちらです。必要に応じてソースコードをベースにカスタマイズすることも、お問い合わせいただくこともできます：Github Repo
2.1. コンポーネントの機能特性
-
Ant Designでは5種類のボタンを提供しています。
- プライマリボタン：主要なアクションポイントに使用され、操作エリアには1つのプライマリボタンのみが許可されます。
- デフォルトボタン：主従の区別のないアクションポイントのグループに使用されます。
- 破線ボタン：一般的に追加操作に使用されます。
- テキストボタン：最も重要度の低いアクションポイントに使用されます。
- リンクボタン：一般的にリンク、つまり特定の場所へのナビゲーションに使用されます。
-
また、上記と組み合わせて使用する3つのステータスプロパティがあります。
- 危険：削除/移動/権限変更などの危険な操作に使用され、通常は二次確認が必要です。
- ゴースト：背景色が複雑な場所で使用され、ホームページ/製品ページなどの表示シーンでよく使用されます。
- 無効：アクションポイントが利用できない場合に使用され、通常はテキストによる説明が必要です。
-
大・中・小の3つのサイズレベルを提供します。
-
デフォルト、サークル、ラウンドの3つの形状オプションを提供します。
-
親コンテナの全幅ボタンを実装するためのBlock設定を提供します。
2.2. コンポーネントのインストールと使用
- MarketplaceまたはGithub Releaseからmpkファイルをダウンロードし、プロジェクトディレクトリ
{YourMendixProjectFolder}/widgets/に追加するか、Studio Proで直接Marketplaceからダウンロードします。 - 任意のページを選択し、
Antd Buttonをページに追加します。 - コンポーネントに必要な属性を設定します。
Caption、Type、Shape、Size、Block、OnClick Eventなどを含みます。
- 実行して効果を確認します。
2.3. コンポーネント設定項目の説明
メインセクション
- Caption：ボタンテキスト。
- Button Type：ボタンタイプを設定。
- Button Shape：ボタン形状を設定。
- Button Size：ボタンサイズを設定。
- Button Block：全幅ボタンにするかどうかを設定。
ステータスセクション
- Disabled：ボタンイベントを無効にするかどうか、デフォルトは
No。 - Danger：危険ボタンかどうか、デフォルトは
No。 - Ghost：ゴーストボタンかどうか、デフォルトは
No。
イベントセクション
- OnClick Event：ボタンクリックイベント。
コンポーネントプロジェクトの所属工程
これは、チームメンバーのGavinがシーメンスMendixチームを退職する前に開発したMx Antd ButtonおよびPopconfirmコンポーネントです。Mendix中国チームが主導するMendix-Antdプロジェクトの一部で、このプロジェクトはantdウィジェットをMendixの世界に持ち込み、Mendix開発者がUIウィジェットの実装ではなく、ビジネス機能により注力できるようにすることを目指しています。
プロジェクトのGithubアドレス：Mendix Antd Widget Show
プロジェクトデモのデモンストレーションアドレス：Mendix Antd Widget Demo
