Simple List Component
Last updated
Last updated
Simple lists are used to organize and display information in an easy-to-read format. They help present data or options in a structured manner, making it convenient for users to scan through and find what they need quickly. Think of a list as a tidy way to show items like contacts, tasks, or menu options, saving space and making navigation smoother within an app.
You can customize the Simple List with the following properties:
Text Items
Set text items of Simple List
List of text items
Color
Set font color of Text Items
Color
Background Color (text items)
Set background color for the items in the Simple List
Color
Font Size
Set font size of Text Items
Number
Show Arrow
Toggle whether arrow is shown beside text items
True/False
Writing Direction (iOS and web app only)
Set writing direction of text items
Select from list [auto, ltr, rtl]
Background Color (container)
Set the background color of the Simple List container.
Color
X
Set the location of your Simple List on the X-axis in pixels
Number
Y
Set the location of your Simple List on the Y-axis in pixels
Number
Height
Set the Height of your Simple List in pixels
Number
Width
Set the Width of your Simple List in pixels
Number
Resize Mode
Define dimensions of the Simple List component/container
Select from list [Stretch, Float in Place]
Visible
Toggle whether your end users can see the Simple List
True/False
Border Style
Set style of Simple List's border
Select from list [solid, dotted, dashed]
Border Color
Set color of Simple List's border
Color
Border Width
Set width of Simple List's border in pixels
Number
Border Radius
Set radius of corners for Simple List's border in pixels
Number
Shadow Color
Color of Simple List's shadow
Color
Shadow Opacity
Opacity of Simple List's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of Simple List's shadow in pixels
Number
Shadow Offset
How far Simple List's shadow should be offset, in Height and Width, in pixels
Number
To access the blocks specific to the simple list component:
On the Design tab, add a Simple List component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the simple list component.
A drawer of simple list-specific blocks opens.
This event fires and performs an action when the user clicks on an item within a simple list component.
Outputs
Item
Text of selected item
String
Index
Position of item in simple list (starting with 1)
Number
There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.
The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.
The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).
Sample Blocks Combinations: Set Simple List's Text Items to
There are various ways you can define the items in a list using blocks. Using the "set simple list's text items to" block, you can:
Type each list item.
Make the list from a string of text.
Pull list items from a column of a connected data source. This method allows you to create a dynamic simple list where the information displayed to the user changes whenever you change your cloud-based data in the data source.
On Android devices, it is a known limitation that it is not possible to have three levels of nested scrollable components. If your list doesn't scroll you have to set at most one component as scrollable or only the screen scrollable outside of the simple list component.
Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.
