# 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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-a9c20a1c065a2da7043c1f42047839254f9615bf%2Flisttransformationatts.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). ### 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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-35bb3598db2ce5bed7d027748499c2791bfe751a%2Flist2dsimple.png?alt=media) ![List Attributes: Advanced Mode On.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-9b5bb4b6886b451113583878e39391dfe5baceef%2Flist2dadvanced.png?alt=media) * 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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-f476919bc025134823d6e2abb9d2317261104a3e%2Flistimage420232.png?alt=media) These two processes result in a **List** that appears like this (with some other visual **Attributes** changed): ![](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-bf961d2fadfdd6cffa62703845817bc104e465d5%2Flistexample2.png?alt=media) ### List Item ![List Item Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-4c13e315fd9c8962b6b091fe67ac400a85fb1ad1%2Flistlistitemnew.png?alt=media) 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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-8b4729a8b46d456693d5de604b0cc72fa4b3f4fa%2Flistitemseparator.png?alt=media) * `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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-8ffac5f34c78dd59ee5a30e47a900990853d93d4%2Flisttextnew.png?alt=media) 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.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-359f593a8e20183f2f4b0beaffcec8c83e7b4788%2Flistfontatts.png?alt=media) 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**](https://docs.incari.com/incari-studio/2023.2/modules/project-settings/fonts). * `Size` determines the size of the font in pixels. ### Style ![Style Attributes.](https://2561100106-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ff6JZovzOqBctA4C1o76u%2Fuploads%2Fgit-blob-2fb2658e61ac0798030506b23baaffd919186205%2Fliststyleatts.png?alt=media) * 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.](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 **List**. See more on *tags* [here.](https://docs.incari.com/incari-studio/2023.2/objects-and-types/attributes/common-attributes/tag)