list-item
The list-item component serves as the child component whenever any list-related item has been called, as discussed in the jig.list and list sections. The component determines how the list items are returned, allowing you to customize the data returned and add UI elements to the lists.
Core structure | |
title | Add a title for the list-item. You can use an expression and datasource to set the title. The title must fit the line, as the text will not wrap to the next line. |
Other options | |
color | The color of the list item changes based on conditions. The first evaluating to true will be used. |
description | The subtitle or description should be displayed with the list-item title. You can format the text of these properties if you select the "Text With Format" option in the builder help (ctrl + space). |
divider | Set the space between two items in the list.
|
leftElement | Set an element to the left of the list. The following elements are available:
|
progress | Add a colorful visualization (background color of your choice) of the list item's progress. The color displays from left to right, and the range of the allowed values is from 0 to 1. |
rightElement | Set an element to the right of the list. The following elements are available:
|
subtitle | The subtitle or description should be displayed together with the title on the list-item. You can format the text of these properties if you select the Text With Format option in the IntelliSense (ctrl + space). |
Actions | |
onPress | The action is available with the swipeable action and is triggered when pressing an item in the list. Use IntelliSense (ctrl+space) to see the list of available actions. |
swipeable | Use the swipeable property to add the onPress action. The action will appear and become pressable by swiping the list-item to the left or right. |
State Configuration | Key | Notes |
amount checked |
| |
amount checked |
| |
activeItemId now |
|
Examples and code snippets
Simple list
![Simple list Simple list](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/oaGdScUornjhMeTBYRc_4_ejehdkaqr-kttddhz-mnlist-item-simpleiphone13blueportrait.png?format=webp)
Simple list with Dividers
![Simple list Simple list with dividers Simple list Simple list with dividers](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/AhiFTF1owFWc_uBWC5IZE_hyswubgvaldb7uglnhat2list-item-simple-list-with-dividersiphone13blueportrait.png?format=webp)
List with colored progress bars
![List with colored progress List with colored progress](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/BtaCQqtJaD-wNigr8V_4c_vheyzsjwjtnsuar7karelist-item-list-with-colored-progressiphone13blueportrait.png?format=webp)
This example showcases two additional properties that have been configured, the progress and colors. You can use the data along with some expressions to manipulate data to create meaningful list displays.
List with charts
![List with pie charts List with pie charts](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/KDXgTylo397l_GXU5x7KL_qu0gj0krbtqn5vultjlxclist-pie-chartiphone13blueportrait.png?format=webp)
![List with bar charts List with bar charts](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/FfVF3Ub7uRA05qRs8tJWO_jn40-3cl-ltjpncmuxjvgmicrosoftteams-image-15iphone13blueportrait.png?format=webp)
List with avatars
![List with avatars List with avatars](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/JJ1seVV7Efi9NQnQHZmTB_e5upxj7-urcgsuxtcp5slist-aviphone13blueportrait.png?format=webp)
This example shows avatars, to display a list of users associated with a single list item.
Examples: See the full example using static data in GitHub.
List with left avatar
![List with avatars (left) List with avatars (left)](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/dkoeQZwtwHtuKFr8H9yxt_rcaen6d1so7lyjl2nzf5llist-item-list-with-left-avatariphone13blueportrait.png?format=webp)
List with left checkboxes
![List with checkboxes List with checkboxes](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/x2clPytexhaTH_qfHpVY__fdrz1vv2hbuu9q0dgcdodsmv-fvy5fpk099pi5rrqzlist-checkboxiphone13blueportrait.png?format=webp)
This example showcases a list with checkboxes to the left. This can be configured with preset checked values or can just be empty for the user to select themselves.
Examples: See the full example using static data in GitHub. See the e full example using dynamic data in GitHub.
Specifying initialValue will determine the value when the list is loaded, however, specifying the value presets the value itself. The latter is handy when you want to display details that don't require much intervention from the user or if you wish to make it easier and faster so they only have to review the current selections for instance.
List with the left icons
![List with icons List with icons](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/JAtA4otqqFrAs9za7FIs3_gna9tuadsx99diyhsiboxlist-iconiphone13blueportrait.png?format=webp)
List with the left image
![List with image List with image](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/gu0kWLJ5LjyEeKfnVvz2r_utfzvw9whm0wcm6gc9yawlist-item-list-with-left-imageiphone13blueportrait.png?format=webp)
List with left progress
![List with progress List with progress](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/O_BaCHvoeFbo0DkinncLd_vajg417ory3f3euuo4x2list-item-list-with-left-progressiphone13blueportrait.png?format=webp)
Swipeable list (left)
![Swipeable list Swipeable list](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/XzfvAzfRLPXJRIq3ReunI_5kj42o8go2rqylydgcfk2list-item-list-with-left-actionsiphone13blueportrait.png?format=webp)
![Swipeable list Swipeable list](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/aMvpWlRj22Vv8VZAN0nmq_jfaggcv5klhtvizlm8golist-item-list-with-left-action-2iphone13blueportrait.png?format=webp)
This example shows using the swipeable action to access the onPress action as well as setting up a primary and secondary action.
Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
List with the right amount control
![List with amountControl List with amountControl](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/MA-q8ZlgaAAAv6K1-lY12_amountiphone13blueportrait.png?format=webp)
![List with amountControl List with amountControl](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/BVgwQwc-u7t3al_T1a1wQ_amount2iphone13blueportrait.png?format=webp)
Examples:
See the full example of amount control options in GitHub. See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
List with the right badges
![List-item with right badge List-item with right badge](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/6pr-W37fF6tDNKRq-IcJZ_laf2hfn2nyoftpdlnswvdlist-item-list-with-right-badgesiphone13blueportrait.png?format=webp)
List with right Buttons
![List-item with button List-item with button](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/6ck85q-vbIbPkFx9nNATi_d3ptpdpev77myzdrorar6list-item-list-with-right-buttonsiphone13blueportrait.png?format=webp)
List with the right icons
![List-item with right icons List-item with right icons](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/LThLHuzogVHMTCGSBTqQx_qdz52zzyubqgyry6zds0jlist-item-list-with-right-iconsiphone13blueportrait.png?format=webp)
List with the right switch
![List-item with switch List-item with switch](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/uAPC1TOQCbbyFVemTjK8v_meupj7vbkowgcopmi3ayclist-item-list-with-fight-switchiphone13blueportrait.png?format=webp)
List with the right value
![List-item with right values List-item with right values](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/SG96hzcayNkIWXR7KfEUt_i6kdtqmbzslvs7qspdrvlist-item-value.png?format=webp)
Swipeable list (right)
![Swipeable list-item Swipeable list-item](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/u4eoBhNYyYy8j12YA_3ZK_ouqf6rojepc3nucnvigi1list-item-right-actions-1.png?format=webp)
![Swipeable list-item Swipeable list-item](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/AOHYuBGxRQ7I6ogi1vmA7_vf8rimxrqhv4tqn3c5pnzlist-item-right-actions2-1.png?format=webp)
This example shows the swipeable action configured to swipe right for each list-item. We show how to set up a primary and secondary action.
Examples:
See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
List with active item
This allows you to see when you are interacting with a specific list-item. Whilst interacting, the list item changes slightly making it clear which item you are interacting with.
![List with active item List with active item](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/ZXVfNjN34r9oHkPVwn1zU_hrt6p-qzkzkwozswl5gv2active-itemiphone13blueportrait.png?format=webp)
![List with active item List with active item](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/4Yd79ph0o-OvrSky5Lmw6_apvhjt6nuhdxw9ajqgatgdwactiveiphone13blueportrait.png?format=webp)
Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub. Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
List with sections
![List with sections List with sections](https://images.archbee.com/x7vdIDH6-ScTprfmi2XXX/whtqp02eRphPEBnFDMmUr_sectionsiphone13blueportrait.png?format=webp)
List items contained in a card (styling)
This example use the isContained property set to true to style each item by wrapping it in a card.
Examples: See the full example in GitHub.