📑 Tabview
The Tabview widget is a powerful organizational tool that divides a single screen into multiple "pages" or tabs. It is the gold standard for complex HMIs, allowing users to switch between different functional areas—like Dashboard, Settings, and Logs—without the overhead of loading entirely new Screens.
⚙️ Properties (Props)
The Tabview configuration is defined by the TabViewWidget interface. It manages a collection of sub-containers (Tabs) and a navigation bar.
| Property | Type | Description |
|---|---|---|
| Tab Count | number | The total number of separate pages in the widget. |
| Active Tab | number | The index of the currently visible tab (starts at 0). |
| Tab Position | Dropdown | Place the navigation bar at the Top, Bottom, Left, or Right. |
| Anim Time | number | The duration of the sliding transition between tabs. |
🛠 Structural Hierarchy
A Tabview acts as a parent for multiple Tab Objects. Each tab is essentially a specialized Container.
- Tab Buttons: The engine automatically generates buttons for each tab based on the names you provide.
- Content Area: This is where you place your sliders, labels, and charts. Each tab has its own independent coordinate system.
- Gestures: By default, Tabviews support horizontal swiping to move between adjacent tabs, providing a native mobile-like experience.
🎨 Visual Styling
In the Inspector Panel, you can style the navigation and content areas separately:
- Tab Bar: Adjust the background color, height, and border of the button row.
- Buttons: Define unique styles for the Active tab (e.g., a bold underline or accent color) vs. the Inactive tabs.
- Indicator: Customize the sliding bar that follows the user's selection along the tab bar.
⚡ Runtime API (Lua)
Tabviews are frequently controlled via the Logic and Events system to guide users through workflows.
-- Get the index of the current tab
local current_tab = tv_main:get_tab_active()
-- Programmatically switch to the "Settings" tab (Index 2)
tv_main:set_active_tab(2, true) -- index, animate
-- Rename a tab dynamically
tv_main:set_tab_name(0, "Live Data")
-- Disable swiping to lock the user on a specific tab
tv_main:set_content_scrollable(false)
While a Tabview makes navigation easy, remember that all widgets in all tabs stay in memory. If you have 5 tabs with 20 widgets each, the engine is tracking 100 widgets. For low-RAM devices, consider using separate Screens instead.
🚀 Next Steps
- Container — Use for grouping content within a single tab.
- Screen — Use if your tabs are becoming too memory-intensive.
- Logic and Events — Learn how to trigger a "Save" action when a user leaves a specific tab.