# List A **List** is a **GUI 2D Object** that allows the user to create a *list*. The contents of the list, and any visual components, can be customized in the [**Attributes**](#attributes). ## Attributes The **Object's** **Attributes** can be used to fully customize the **Object**. Explained below, they are: * [**Transformation**](#transformation) * [**List**](#list) * [**List Item**](#list-item) * [**Separator**](#separator) * [**Text**](#text) * [**Font**](#font) * [**Style**](#style) * [**Tag**](#tag) ### Transformation ![Transformation Attributes.](/files/ww0xTmfml5JY0PI16LJU) The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](/incari-studio/2023.1/objects-and-types/attributes/common-attributes/transformation.md). ### List The `List` **Attributes** provide crucial data for a **List Object**. When `Advanced Mode` is toggled on, the **Attribtues** differ slightly. ![List Attributes: Advanced Mode Off.](/files/WpzFdOR0cTQZ6Za5vMZO) ![List Attributes: Advanced Mode On.](/files/GMXfdGkRrLUV3boU3Uxi) * The `Active Index` **Attribute** decides which item is currently active in the **List**. * `Advanced Mode` determines whether `Entries` or `JSON File` will appear in the **Attributes**. * `Entries` allows the user to add the elements of the **List** and is only visible when `Advanced Mode` is toggled off. * The `JSON File` contains all the information for the **List** when `Advanced Mode` is toggled on. Thus there are two ways to populate a **List**: * When `Advanced Mode` is toggled on, the `JSON File` **Attribute** appears. The `JSON File` contains more specific data of the **List** and allows the user to have more control. For example, a *JSON* file could contain something like this: ``` [ { "icon": "Users/user.name/Documents/Project1/Assets/image1.jpg", "text": "you collected" }, { "icon": "Users/user.name/Documents/Project1/Assets/image2.png", "text": "over 9000" }, { "icon": "Users/user.name/Documents/Project1/Assets/image3.png", "text": "overhours" } ] ``` * When `Advanced Mode` is toggled off, the `Entries` are visible. The user can manually input each **List** entry one by one. ![Example List Entries with Icons.](/files/nsBCiQU1rxPwxWSzk43c) These two processes result in a **List** that appears like this (with some other visual **Attributes** changed): ![](/files/giQw29YkogjcMS10CBHh) ### List Item ![List Item Attributes.](/files/ixEmR5sEimjP2m6peXjs) The `List Item` **Attributes** provide crucial data for a **List Object's** items. * `Height` decides the space between each segment of the list (the total vertical space of an item) in pixels. * `Background Color` decides the background color of the **List's** items. * `Use Icon` toggles the visibility of any icons in the **JSON** file on or off. Please note, for icon images the absolute path on one's local machine must be used. * `Icon Size` determines the size of the icons in pixels. ### Separator ![Separator Attributes.](/files/UdrE3VR5BW53wTj2fhaP) * `Size` chooses the thickness of the separators, which are the lines between **List** items, in pixels. * `Color` determines the color of the separators. ### Text ![Text Attributes.](/files/oV6UQCQwkyGnXBy8c7eS) The `Text` **Attributes** customize the textual elements of a **List**. * `Color` decides the color of the **List's** text. * `Alignment` sets the alignment of the text. This is either left, right, or center. * `Transform` can easily change certain text aesthetics. `Capitalize` makes the first letter capital, `uppercase` makes all letters capital, and `lowercase` makes all letters lowercase. ### Font ![Font Attributes.](/files/a8WhTwq7LcTKjFP6yEHe) The `Font` Attributes control certain font characteristics. * `Family` offers three different font types: `monospace`, `sans-serif`, and `serif`. More fonts can be added by the user in [**Project Settings**](/incari-studio/2023.1/modules/project-settings/fonts.md). * `Size` determines the size of the font in pixels. ### Style ![Style Attributes.](/files/t4wZnne9wTsEy4ejvBJQ) * The `Text Margin` **Attribute** adds *margins* to the text of a **List** depending on what sizes are specified and for which sides. The options are `x` for the top, `y` for the right, `z` for the bottom, and `w` for the left. [Margins](https://www.w3schools.com/Css/css_margin.asp) are often seen in the context of *CSS*. Similarly, here, it is the extra space around the **List** item's text in relation to the space around it. * `List Padding` adds *padding* to a **List** depending on what sizes are specified and for which sides. The options are `x` for the top, `y` for the right, `z` for the bottom, and `w` for the left. [Padding](https://www.w3schools.com/cssref/pr_padding.php) is often seen in the context of *CSS*. Similarly, in **Incari**, it is the extra space inside the **List Object** itself. The separators of the **List** do not extend into this space. * `List Margin` adds *margins* to a **List** depending on what sizes are specified and for which sides. The options are `x` for the top, `y` for the right, `z` for the bottom, and `w` for the left. [Margins](https://www.w3schools.com/Css/css_margin.asp) are often seen in the context of *CSS*. Similarly, here, it is the extra space around the **List** in relation to other **Objects**. * `Icon Margin` adds *margins* to the icons of a **List's** depending on what sizes are specified and for which sides. The options are `x` for the top, `y` for the right, `z` for the bottom, and `w` for the left. [Margins](https://www.w3schools.com/Css/css_margin.asp) are often seen in the context of *CSS*. Similarly, here, it is the extra space around the **List** item's icon in relation to the space around it. * `CSS Classes` contains the *CSS* class names of the **Object**. * `Stylesheet` contains the *CSS* stylesheet of the **Object**. ### Tag ![Tag Attributes.](/files/TPt8ylPfENI8h1ezukwe) This **Attribute** manages the *tags* for the **List**. See more on *tags* [here.](/incari-studio/2023.1/objects-and-types/attributes/common-attributes/tag.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.incari.com/incari-studio/2023.1/objects-and-types/scene2d-objects/gui/list.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.