Dropdown
Last updated
Last updated
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.
The Object's Attributes can be used to fully customize the Object. Explained below, they are:
The Transformation
Attributes deal with placement, rotation, and size in XY space. More information can be found here.
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.
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 Color
decides 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.
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.
This Attribute manages the tags for the Dropdown. See more on tags here.
The following is a simple example of a Dropdown with three options:
The Options
Attribute defines the options in the Dropdown:
Finally, this Dropdown looks like this when the Project is run: