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

• Text

• Dropdown

• Code

• Tag

Transformation

Transformation Attributes.

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

Text

Text Attributes.

The Text Attributes customize the textual elements of a Dropdown.

• Font family offers three different font types: monospace, sans-serif, and serif. More fonts can be added by the user in Project Settings.

• 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.

• Font size (px) determines the size of the font in pixels.

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

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

Dropdown

Dropdown Attributes.

The Dropdown Attributes provide crucial data for a Dropdown Object.

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

• Background Colordecides the color of the Dropdown's background.

• Options provides the elements which will populate the Dropdown. Here there are three elements called one, two, and three.

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

Code

Code Attributes.

The Code 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.

• Class names 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.