The Design System Class Properties allow you to customize and configure styles and behaviors in user interfaces.
To make it easier to edit these Class Properties (CSS and gx-properties), the Properties Editor can be used.
The Properties Editor greatly simplifies the design process by providing a smooth experience for viewing, filtering, and synchronously editing properties.
You can filter and configure properties according to a specific control type and a certain user interface. To do so, use the Filter by ControlType and the Filter by UI properties to select the filter you want, and the related properties will be shown.
In addition, when you use the Properties Editor to set a certain property, that configuration is shown (refreshed) directly in the Styles section of the Design System Object for the corresponding property of the Class where the cursor is positioned. Likewise, when the cursor is positioned over a class in the Design System Styles section, and you edit a property value, the Properties Editor is automatically updated.
The Properties Editor also provides information about property inheritance. This means that, for example, if a class A uses the Include style rule to incorporate the settings of class B, and class B defines a background color: red, when the cursor is over class A, the Properties Editor will display background color: red as the "default" property.
To illustrate the above, the following image shows two classes defined in the Styles section of a Design System object: "HighlightInfo" and "LabelHighlightInfo".
In the "HighlightInfo" class, the following properties have been defined:
- "font-family"
- "font-size"
- "color"
The "LabelHighlightInfo" class contains these properties:
The @Include rule is used to incorporate the settings of the "HighlightInfo" class. When the cursor is positioned over the "LabelHighlightInfo" class, the "font-family" and "font-size" properties configured in the "HighlightInfo" class are displayed in the Properties Editor.
This functionality is available since GeneXus 18 Upgrade 5.
Design System Class Properties List File