stage

In this component, you add left and right elements, typically showing a start-and-end concept, such as flight schedules.

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.

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

Consideration

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

Examples and code snippets

Stage in expander

Stage in expander

Examples:

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

stage (static)

children:
  - type: component.expander
    options:
      header:
        centerElement:
          type: component.stage
          options:
            right:
              title: Boston
              subtitle: 11:30
            left:
              title: New York
              subtitle: 12:30

stage (dynamic)

datasources (dynamic)

Stage in list

Stage in list

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.

stage-list (static)

title: Trip in list
type: jig.list

data: [email protected]
item:
  type: component.stage
  options:
    right:
      title: [email protected]
      subtitle: [email protected]
    left:
      title: [email protected]
      subtitle: [email protected]

stage-list (dynamic)

datasources (static)

datasources (dynamic)