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
The Object's Attributes can be used to fully customize the Object. Explained below, they are:
Transformation
The Transformation
Attributes deal with placement, rotation, and size in XY space. More information can be found here.
List
The List
Attributes provide crucial data for a List Object. When Advanced Mode
is toggled on, the Attributes differ slightly.
The
Active Index
Attribute decides which item is currently active in the List.Advanced Mode
determines whetherEntries
orJSON File
will appear in the Attributes.Entries
allows the user to add the elements of the List and is only visible whenAdvanced Mode
is toggled off.The
JSON File
contains all the information for the List whenAdvanced Mode
is toggled on.
Thus there are two ways to populate a List:
When
Advanced Mode
is toggled on, theJSON File
Attribute appears. TheJSON 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:
When
Advanced Mode
is toggled off, theEntries
are visible. The user can manually input each List entry one by one.
These two processes result in a List that appears like this (with some other visual Attributes changed):
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.
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).
List Item
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
Size
chooses the thickness of the separators, which are the lines between List items, in pixels.Color
determines the color of the separators.
Text
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, andlowercase
makes all letters lowercase.
Font
The Font
Attributes control certain font characteristics. Please note that while Lists are capable of handling 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
, andserif
. More fonts can be added by the user in Project Settings.Size
determines the size of the font in pixels.
Style
The
Text Margin
Attribute adds margins to the text of a List depending on what sizes are specified and for which sides. The options arex
for the top,y
for the right,z
for the bottom, andw
for the left. Margins 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 arex
for the top,y
for the right,z
for the bottom, andw
for the left. Padding 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 arex
for the top,y
for the right,z
for the bottom, andw
for the left. Margins 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 arex
for the top,y
for the right,z
for the bottom, andw
for the left. Margins 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
This Attribute manages the tags for the List. See more on tags here.
Last updated