Components
list

stage

6min

A stage is a primary container for displaying various UI components on the left and right, typically showing a start-and-end concept.



Stage in a list
Stage in a list


Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



Core structure



left

Add content to the left element as text, or use an expression.

right

Add content to the right element as text, or use an expression.

title

Add titles for the text on the left and right elements.

Other options



icon

Add an icon to show in the centerElement. A list of icons is available. See Jigx icons for more information.

style

isWaitingSync - Will display a "Waiting sync" indicator (cloud with a line through it), a visual indicator showing that data has not been synced to the cloud yet.

subtitle

Add a subtitle to either the left or right element as text, or use an expression.

Actions



onPress

The action is triggered while pressing on an item in the stage. Use IntelliSense (ctrl+space) to see the list of available actions.

Consideration

  • component.stage can only be used in the component.list or an expander.

Examples and code snippets 

Stage for flights
Stage for flights


This example shows list items with left and right elements and typically shows a start-and-end concept. Flight schedules are used in this example. However, you can choose a different icon for many different use cases.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

default-w-stage-list (static)
default-w-stage-list (dynamic)
datasources (static)
datasources (dynamic)

Stage in list with expanders
Stage in list with expanders


This example shows a list of expanders that have used the stage components as their header elements.

Expanders are ideal for displaying additional information without having to navigate to another page.

Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.

list-expander (static)
list-expander (dynamic)
datasources (static)
datasources (dynamic)




Updated 05 Aug 2024
Doc contributor
Did this page help you?
Yes
No