# 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**](#attributes).

![Dropdown GUI Object.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-89eb02f52c62efe064435d37fc610c45f0c7265c%2Fdropdownimage120232.png?alt=media)

## Attributes

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

* [**Transformation**](#transformation)
* [**Text**](#text)
* [**Dropdown**](#dropdown)
* [**Code**](#code)
* [**Tag**](#tag)

### Transformation

![Transformation Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-ec9233de87ee43e3315d3fb215d9765d4bca2851%2Fdropdownattstransformation.png?alt=media)

The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/2023.2/objects-and-types/attributes/common-attributes/transformation).

### Text

![Text Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-5cd7b95d5d60cc838e78b10fd2a841544219be17%2Fdropdownattstext.png?alt=media)

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**](https://docs.incari.com/incari-studio/2023.2/modules/project-settings/fonts).
* `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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-ed05544113bb363593221a69c92d4c1042853eae%2Fdropdownattsdropdown.png?alt=media)

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

### Code

![Code Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-3e0c8c793b094cde31dfa86e772e4caafa616ab7%2Fbuttonattscode.png?alt=media)

The `Code` **Attributes** allow for more customizability. This can override any stylesheet provided in the [**Project Settings**](https://docs.incari.com/incari-studio/2023.2/modules/project-settings/style) or a [**Scene2D**](https://docs.incari.com/incari-studio/2023.2/objects-and-types/project-objects/scene2d).

To address these in the **Logic**, please refer to the [**Object 2D Nodes**](https://docs.incari.com/incari-studio/2023.2/toolbox/incari/object2d).

* `Class names` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**.

### Tag

![Tag Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media)

This **Attribute** manages the *tags* for the **Dropdown**. See more on *tags* [here.](https://docs.incari.com/incari-studio/2023.2/objects-and-types/attributes/common-attributes/tag)

## Example

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

![Dropdown.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-3d216354d2bf26bd1a88e765cdaf13b5f1d3cb07%2Fgui-dropdown1.png?alt=media)

The `Options` **Attribute** defines the options in the **Dropdown**:

![Options Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-e454dfdb7f38e6853cbd6f3ac0e70aeb591b0073%2Fgui-dropdown-options.png?alt=media)

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

![Dropdown example.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-2e25f734715ca9fe8a9c7168766b5df710dcaeb2%2Fdropdown-example.gif?alt=media)