Table of contents

Official Content

Properties with names such as "gx-xxxx-class" must be assigned a certain class that gives them a style.

Some examples for Web applications are as follows:

This is an example for Web, Angular, and Native Mobile applications:

Below is an example for a Native Mobile application.

Consider a Menu object whose Control property = Tabs and its Class property = Tab.

A Design System Object called "MyStyle" is defined, containing in its Styles section the following definitions:

Styles MyStyle{
        gx-tab-strip-background-color: $colors.Primary;
        gx-tab-strip-indicator-color: $colors.ActionTint;
        gx-selected-tab-page-class: TabPageSelected;
        gx-unselected-tab-page-class: TabPageUnselected;
        text-transform: uppercase;
        @include TabPage;
        color: $colors.Background;
        @include TabPage;
        color: $colors.Background55;
        font-weight: normal;

Note the gx-selected-tab-page-class and the gx-unselected-tab-page-class to which the TabPageSelected and the TabPageUnselected classes have been assigned, respectively.

The Design System Tokens section is defined as shown below:

tokens Name {
        Primary: #656A76;
        ActionTint: #602C80;
        Background: #AACCAD;
        Background55: #D0B9CD;

Finally, in the KB Explorer, under the Customization node > Platforms > Any Platform, the Style property was set to "MyStyle".

At runtime, you will see the following:

DSO properties that begin with gx- and end with class runtime sample


Last update: November 2023 | © GeneXus. All rights reserved. GeneXus Powered by Globant