> For the complete documentation index, see [llms.txt](https://docs.incari.com/incari-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.incari.com/incari-studio/2024.1/objects-and-types/scene2d-objects/gui/list.md). # 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/j5vD06vskga2yB1IINoS) The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](/incari-studio/2024.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 **Attributes** differ slightly. ![List Attributes: Advanced Mode Off.](/files/DSS5vkisDAvCOb83ux2f) ![List Attributes: Advanced Mode On.](/files/C9x57IJereacWXlqgOxB) * 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/K2OUbBmboMvknjvWb0Mr) These two processes result in a **List** that appears like this (with some other visual **Attributes** changed): ![](/files/H2i8J9euuCLxOZM088NY) There are also two types of `Entries`: `Static Text` and `Translation`. This can be switched using the text or translation icons to the right, in that order. ![Static Text and Translation.](/files/tDPDD7Jr4e8xwGcV2C3b) In the image below, there are three `Entries` labeled `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**](https://github.com/cgi-studio-gmbh/incari-doc/blob/2024.1/modules/project-settings/localization.md)). ![](/files/ZlDLJrGzMr51wiIsttPm) ### List Item ![List Item Attributes.](/files/6lHRXRkXgpSTY11BmhxD) 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/Kwl9lWZCx0Zi7IIUTxxX) * `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/guqpAsiTJknrvl1GIjED) 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/zEeK3b80wMEOKebqpqzt) The `Font` **Attributes** control certain font characteristics. Please note that while **Lists** are capable of handling [*variable fonts*](/incari-studio/2024.1/modules/project-settings/fonts.md#variable-fonts), only the default style will be used, as the configurable **Attributes** are not available for this **Object**. * `Family` offers three different font types: `monospace`, `sans-serif`, and `serif`. More fonts can be added by the user in [**Project Settings**](/incari-studio/2024.1/modules/project-settings/fonts.md). * `Size` determines the size of the font in pixels. ### Style ![Style Attributes.](/files/Szo7WNKgvaODQHfPy2tO) * 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/AcVS9u9EJzK2klOH2pFq) This **Attribute** manages the *tags* for the **List**. See more on *tags* [here.](/incari-studio/2024.1/objects-and-types/attributes/common-attributes/tag.md)