デザインシステムのクラスのプロパティを使用すると、ユーザーインターフェースのスタイルと動作をカスタマイズおよび設定できます。
これらのクラスのプロパティ (CSS および gx プロパティ) の編集を容易にするために、
プロパティエディターを使用できます。
プロパティエディターを使用すると、プロパティの表示、フィルタリング、同期編集を円滑に行うことができ、設計プロセスが大幅に簡素化されます。
特定のコントロールタイプと特定のユーザーインターフェースに従って、プロパティをフィルタリングおよび設定できます。
[ Filter by ControlType ] プロパティと
[ Filter by UI ] プロパティを使用して必要なフィルタを選択することで、関連するプロパティが表示されます。
また、プロパティエディターを使用して特定のプロパティを設定すると、カーソルを合わせたクラスの対応するプロパティの
Design System オブジェクトの [ Styles ] エレメントに、その設定が直接表示 (再表示) されます。同様に、デザインシステムの [ Styles ] エレメント内のクラスにカーソルを合わせ、プロパティの値を編集すると、プロパティエディターが自動的に更新されます。
プロパティエディターには、プロパティの継承に関する情報も表示されます。つまり、たとえば、クラス A が
スタイルの include ルールを使用してクラス B の設定を取り込んでおり、クラス B で背景色が「red」と定義されている場合、カーソルをクラス A に合わせると、プロパティエディターに「既定の」プロパティとして背景色「red」が表示されます。
このことを示すため、次の画像は Design System オブジェクトの [ Styles ] エレメントで定義されている次の 2 つのクラスを示しています: 「HighlightInfo」および「LabelHighlightInfo」。
「HighlightInfo」クラスでは、次のプロパティが定義されています:
- [ font-family ]
- [ font-size ]
- [ color ]
「LabelHighlightInfo」クラスには次のプロパティが含まれています:
- [ color ]
- [ font-weight ]
「HighlightInfo」クラスの設定を取り込むために @Include ルールが使用されています。カーソルを「LabelHighlightInfo」クラスに合わせると、「HighlightInfo」クラスで設定されている [ font-family ] プロパティと [ font-size ] プロパティがプロパティエディターに表示されます。
この機能は、
GeneXus 18 Upgrade 5 以上で利用できます。
Design System Class Properties List File