Dropdown

The Dropdown is a GUI 2D Object that allows the user to create a dropdown menu. The options in the menu, together with the colors and size, can be customized in the Attributes.

Dropdown GUI Object.

Attributes

The Object's Attributes can be used to fully customize the Object. Explained below, they are:

• Transformation

• Dropdown

• Text

• Font

• Style

• Tag

Transformation

Transformation Attributes.

The Transformation Attributes deal with placement, rotation, and size in XY space. More information can be found here.

Dropdown

Dropdown Attributes.

The Dropdown Attributes provide crucial data for a Dropdown Object. The Options have two types: Static Text and Translation. This can be switched using the text or translation icons to the right, in that order.

Static Text and Translation.

• Active index determines which Option is shown at the front of the Dropdown. Remember that the first element has the index of 0.

• Options provides the elements which will populate the Dropdown. Here there are three elements called one, two, and phrase. The first two are of type Static Text, where the user simply types the desired text. The third is of type Translation, which lets the user choose the key of the current language (which is established in the Project Settings). In the image above, the selected key is phrase.

In the above image, because the Active index is set to 0, 'one' would be element shown at the front of the Dropdown.

Text

Text Attributes.

The Text Attributes customize the textual elements of a Dropdown.

• Color decides the color of the Dropdown's text.

• Transform can easily change certain text aesthetics without requiring the user to change the Options Attributes themselves. Capitalize makes the first letter capital, uppercase makes all letters capital, and lowercase makes all letters lowercase.

• Line height (%) determines the placement of the text within the Dropdown.

Font

Font Attributes.

The Font Attributes focus on the details of the Drowpdown's text. Please note that while Dropdowns are capable of handling variable fonts, only the default style will be used, as the configurable Attributes are not available for this Object.

• Family offers two different font types: Manrope and Source Code Pro. More fonts can be added by the user in Project Settings.

• Size determines the size of the font in pixels.

Style

Style Attributes.

The Style Attributes allow for more customizability. This can override any stylesheet provided in the Project Settings or a Scene2D.

To address these in the Logic, please refer to the Object 2D Nodes.

• Background Color decides the color of the Dropdown's background.

• CSS Classes contain the CSS class names of the Object.

• Stylesheet contains the CSS stylesheet of the Object.

Tag

Tag Attributes.

This Attribute manages the tags for the Dropdown. See more on tags here.

Example

The following is a simple example of a Dropdown with three options:

Dropdown.

The Options Attribute defines the options in the Dropdown:

Options Attributes.

Finally, this Dropdown looks like this when the Project is run:

Dropdown example.