Skip to main content

Image List

Type​

widget

Description​

The Image List widget displays a collection of images in an organized list. An image list consists of several elements, each of which contains an image and, optionally, supporting content (ie a text label).

Compatibility and Support​

OS

mac

windows

linux

ios

android

Platforms

desktop

mobile

web

Associated Syntax​

Property

NameSummarySyntax
iconColorThe color of the action icon that all items will have.get the iconColor of <widget> Syntax: set the iconColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
itemBorderColorSpecifies the color with which the borders of the image list are drawn.get the itemBorderColor of <widget> set the itemBorderColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
subtitleColorThe color of the item's subtitle.get the subtitleColor of <widget> set the subtitleColor of <widget> to <integer>
subtitleFontThe font name of the item's subtitle.get the subtitleFont of <widget> set the subtitleFont of <widget> to <integer>
hoverIconColorThe color with which the icon is drawn when the pointer is over the item of image lists.get the hoverIconColor of <widget> set the hoverIconColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
rowHeightThe height of one row in px.get the rowHeight of <widget> set the rowHeight of <widget> to {"auto" | <integer>}
showTitleDefines if the title is displayed in the item bar.get the showTitle of <widget> set the showTitle of <widget> to { <true> | <false>}
itemBackgroundColorSpecifies the color with which the background of the items in the list of images is drawn.get the itemBackgroundColor of <widget> set the itemBackgroundColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
categoriesThe category list of the image list items.get the categories of <widget>
variantThe variant to use.get the variant of <widget> set the variant of <widget> to {"standard"|"quilted"|"woven"|"masonry"|"single line"}
itemOpaqueSpecifies whether the interior of the image list items is opaque or transparent to the objects below.get the itemOpaque of <widget> set the itemOpaque of <widget> to {<true> | <false>}
itemBarPositionPosition of the item bar.get the itemBarPosition of <widget> set the itemBarPosition of <widget> to {<below> | <bottom> | <top>}
titleAlignSpecifies the align of the title text of the image lists item.get the titleAlign of <widget> set the titleAlign of <widget> to {"left" | "center" | "right"}
itemCountReports the total number of items in a imagesList.get the itemCount of <widget>
defaultActionIconAn Icon to be used as secondary action target.get the defaultActionIcon of <widget> set the defaultActionIcon of <widget> to <pIconName>
itemBarHeightDefines the height of the item bar.get the itemBarHeight of <widget> set the itemBarHeight of <widget> to <integer>
titleColorThe color of the item's title.get the titleColor of <widget> set the titleColor of <widget> to <integer>
itemPaddingThe padding between items in px.get the itemPadding of <widget> set the itemPadding of <widget> to <integer>
actionIconPositionThe position of the icon to use as the secondary action target.get the actionIconPosition of <widget> set the actionIconPosition of <widget> to {<left>| <right>}
loadingImageA static image to display while loading the image source.get the loadingImage of <widget> set the loadingImage of <widget> to {<Image ID> | <Image Name> }
itemBarColorThe background color of the item barget the itemBarColor of <widget> set the itemBarColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
iconSizeThe size of the item's action icon.get the iconSize of <widget> set the iconSize of <widget> to <integer>
subtitleSizeThe size of the item's subtitle.get the subtitleSize of <widget> set the subtitleSize of <widget> to <integer>
showActionIconDefines if the action icon is shown.get the showActionIcon of <widget> set the showActionIcon of <widget> to { <true> | <false>}
numberOfColumnsDefines the number of columns that the list of images will have.get the numberOfColumns of <widget> set the numberOfColumns of <widget> to <pColumnsNumber>
showSubtitleDefines if the subtitle is displayed.get the showSubtitle of <widget> set the showSubtitle of <widget> to {<true> | <false>}
titleFontThe font name of the item's title.get the titleFont of <widget> set the titleFont of <widget> to <integer>
itemBorderWidthSpecifies the thickness with which the borders of the image list are drawn.get the itemBorderWidth of <widget> set the itemBorderWidth of <widget> to <integer>
showItemBarDefines if the item bar is used.get the showItemBar of <widget> set the showItemBar of <widget> to { <true> | <false>}
themeDataThe theme mappings of this widgetset the themeData of <widget> to {<array>} get the themeData of <widget>
subtitleStyleSpecifies the style of the subtitle text of the image lists item.get the subtitleStyle of <widget> set the subtitleStyle of <widget> to <integer>
itemDataSorted array with the list of images to load and their properties.get the itemData of <widget> set the itemData of <widget> to <pImageListArray>
hilitedIconColorThe color of the highlighted action icon that all items will have.get the hilitedIconColor of <widget> set the hilitedIconColor of <widget> to {<RGB Color> | <HEX Color> | <Color name>}
subtitleAlignSpecifies the align of the subtitle text of the image lists item.get the subtitleAlign of <widget> set the subtitleAlign of <widget> to {"left" | "center" | "right"}
itemThreeDSpecifies whether an item of image lists appears to stick out of or recede into the screen.get the itemThreeD of <widget> set the itemThreeD of <widget> to {<true> | <false>}
titleSizeThe size of the item's title.get the titleSize of <widget> set the titleSize of <widget> to <integer>
clickableWhether the items are clickable elements or not.get the clickable of <widget> set the clickable of <widget> to {<true> | <false>}
titleStyleSpecifies the style of the title text of the image lists item.get the titleStyle of <widget> set the titleStyle of <widget> to <integer>

Message

NameSummarySyntax
imageListStartedLoadingSent when the images in the image list have started loading.on imageListStartedLoading
imageListProgressChangedSent when one of the tiles in the image list is finished loading.on imageListProgressChanged <pLoaded>, <pTotal>, <pUnresolvedImages>
imageListFinishedLoadingSent when all the tiles in the image list have finished loading.on imageListFinishedLoading <pLoaded>, <pTotal>, <pUnresolvedImages>
itemMouseEnterSent when the mouse enters an item's rectangle.on itemMouseEnter <pItemNumber>, <pItemProperties>
itemMouseLeaveSent when the mouse leaves an item's rectangle.on itemMouseLeave <pItemNumber>, <pItemProperties>
itemLongTouchSent when the touch persists.on itemLongTouch <pButton>, <pItemNumber>, <pItemProperties>
itemClickedSent when an item in the image list is clickedon itemClicked <pButton>, <pItemNumber>, <pItemProperties>
actionClickedSent when an action icon in the image list is clickedon actionClicked <pButton>, <pActionNumber>, <pActionProperties>