stage

5min

In this component, you add left and right elements, typically showing a start-and-end concept, such as flight schedules.
﻿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 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 
﻿
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data GitHub. 
stage (static)
stage (dynamic)
datasources (dynamic)
children:
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.stage
          options:
            right:
              title: Boston
              subtitle: 11:30
            left:
              title: New York
              subtitle: 12:30
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 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)
stage-list (dynamic)
datasources (static)
datasources (dynamic)
title: Trip in list
type: jig.list


data: [email protected]-static
item:
  type: component.stage
  options:
    right:
      title: [email protected]
      subtitle: [email protected]-to
    left:
      title: [email protected]
      subtitle: [email protected]-from
title: Trip in list
type: jig.list


data: =@ctx.datasources.trip-static
item:
  type: component.stage
  options:
    right:
      title: =@ctx.current.item.to
      subtitle: =@ctx.current.item.time-to
    left:
      title: =@ctx.current.item.from
      subtitle: =@ctx.current.item.time-from
﻿
﻿

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.