jig.tabs
Tabs allow you to navigate between different jigs with ease, enhancing the user experience by providing an organized layout. These tabs are placed at the top of the screen to ensure a sleek and intuitive interface.
Configuration options
Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.
The jig.tabs can be configured in the following way in Jigx Builder.
badge
Add a badge to display on the tab to highlight critical information. The badge can be configured at the root level of the jig file. The badge can be configured with an icon, color, and a value.
icon
Add an icon to display in the tab. A list of available icons can be found in . The title appears below the icon in the tab.
instanceId
Give the tab a unique identifier, that can be used in expressions.
jigId
Provide the jigId for the jig that will be displayed when the tab is active.
title
Give the jig a title that is displayed at the top of the screen.
type
Select jig.tabs.
tab
title - The text that displays as the tab name.
areTabsScrollable
When there are many tabs that exceed the width of the screen, set the property to true to scroll and view the additional obscured tabs by swiping left. Setting the property to false will only display the tabs that fit on the width of the screen, additional tabs will be hidden. The property is accessible using IntelliSense at the root level in the YAML. By default tabs are scrollable. Tip: Using areTabsScrollable: false will align the tabs in the center.
inputs
Used to pass data between the jigs in the tabs to provide context and data. See for more information.
instanceId
Give the tab a unique identifier allowing you to reference the tab in expressions in jigs.
initialTabId
Specify the tab to display when the jig opens. The tab's jigId is used as the value. This property is accessible via IntelliSense at the root level in the YAML. If not specified, the first tab is displayed by default.
isDisabled
If true you won't be able to toggle the tabs. The default value is false.
isSwipeable
Set to true allows you to navigate between tabs by swiping left and right anywhere on the jig. By default tabs are not swipeable and require you to press on the tab title for navigation.
shouldLazyLoad
Default is true; this improves app performance, especially at startup. The app launches faster because it's only loading what's immediately visible. It also reduces memory usage and data consumption since you're not loading content you might never see.
When set to
true, each tab's content loads the first time you tap on a tab.Set to
false, all tabs load their content immediately, even the ones you are not viewing yet. This is useful in a scenario where a tab needs access to data or values from other tabs immediately. For example, when values entered on a later tab must be referenced or calculated on the first tab.
when
This property is used to show/hide any tab based on conditions, such as true, false, or conditions set using an expression.
actions
The actions property is a local action applicable to the specific tab. Once the tab is tapped, the action will execute.
Action Identifier- Provide a unique name that is used to identify the action.type- Select the action that is triggered in the specific tab. Use IntelliSense to see the available list of actions.
=@ctx.jig.state.
activeTabId
Applies to the active tab in the jig.tab type.
=@ctx.solution.state.
tab
Global variable for the tab used throughout a solution.
Considerations
Specifying a background color for tabs is currently not supported.
jig.headersdo not display in the children tabs.Using
areTabsScrollable: falsealigns the tabs in the center, aligns the tabs at the center, enhancing visual consistency.By default, tabs are set to use lazy loading (
shouldLazyLoad) for performance and memory optimization. Overriding the default tofalsecould result in slow startup performance, increased memory usage, and data consumption, but is useful in scenarios where a tab needs access to data or values from other tabs immediately. For example, when values entered on a later tab must be referenced or calculated on the first tab.Tab navigation bar automatically hides when only 1 tab is present in a jig.
Examples and code snippets
Basic tabs
Scrollable tabs
This example shows the jig.tabs with ten tabs. Tab8, Tab9, and Tab10 are not visible. Setting the the areTabsScrollable: true property enables scrolling on the tab bar. Each tab opens the corresponding jig when pressed. For demonstration purposes placeholder jigs are used.
Swipeable tabs
This example shows the jig.tabs with four tabs. Setting the isSwipeable: true property allows you to swipe left and right anywhere on the screen to navigate between the tabs instead of pressing on each tab title to display the jigs. Each tab opens the corresponding jig.
Examples: See the full code sample in GitHub
Tabs with initialTabId
This example demonstrates the jig.tabs with the third tab (logs) set as the default (initial) tab displayed when the jig opens. The initialTabId: timelogs property specifies which tab will be in focus upon opening the jig. To specify the default jig use the jigId as the initialTabId's value.
Examples: See the full code sample in GitHub.
Tabs with icons
This example demonstrates the jig.tabs with the icons. The active tab's icon displays in the primary color.
Examples: See the full code sample in GitHub.
Tabs with inputs
Set tab's content from a single jig
Last updated
Was this helpful?