Tab View
A customizable Tab View component lets you switch between tabs smoothly along with having the option to swipe through the tabs. Tab position can be set to top or bottom as well as per requirements.
Adding a Tab View
- Select the Tab View component from the Components drawer. You can open the list of components by clicking the + button next to Components.
- Select the added component in the Components tree.
- Set the needed width of the Tab View.
- Select the Tab View Item from the Components drawer. In the example below, we're adding three Tab View Item components.
- Select the Tab View Item component and go to the Config tab. You can update the name and add an icon to the tab from here.
- Select the Tab View Item component and then add a child component to it such as View, Image or Image Background.
Style Properties
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Configuration Properties
Property | Description |
---|---|
Component name | An optional descriptive name for the component. If the name is not "Tab View", it will appear as a comment above this component in the generated code. |
Tab Bar Position | Position of the tab bar |
Keyboard Dismiss Mode | Keyboard Dismiss Mode |
Swipe Enabled | Whether swiping is enabled or not |
Tab Scroll Enabled | Whether scrolling of tabs is enabled or not |
Active Color | Color of icon and text of active tab |
Inactive Color | Color of icon and text of inactive tab(s) |
Indicator Color | Color of indicator |
Tabs Background Color | Background color of tabs container |
Press Color | Color of ripple when pressed (Android Specific) |
Data Propererties
Property | Description |
---|---|
Initial Tab Index | The index of the tab to initially display. Should be a number. For example 0 , 2 , 5 , etc |
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Triggers
Trigger name | Description |
---|---|
On Index Changed | Runs the Actions when swiped |
On End Reached | Runs the Actions when the end of the tabs is reached |
Updated about 1 month ago