TabBar
Example file: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp
The TabBar widget lays out several tabs horizontally so a tap switches the screen or content.
Definition and role
The TabBar widget arranges labeled tabs in a horizontal row and draws an indicator line under the selected tab. Tapping a tab runs the onChanged action and passes the selected index. You can also set the indicator, label colors and styles, and whether the bar scrolls.
- Category: Contents (navigation)
- When first placed, it holds three empty tabs. Customize them to fit your app.
Features
| Feature | Description |
|---|---|
| Tab switching | Tapping a tab changes the selection and runs onChanged. |
| Tab editing (script) | Add or replace tabs and read their labels from a script. |
| Indicator settings | Adjust the color, thickness, and width basis (tab or label) of the selection indicator. |
| Label styles | Set colors and styles for selected and unselected labels, and whether the bar scrolls horizontally. |
How to use
- Open the Contents category in the left widget palette.
- Drag the TabBar item onto the canvas.
- Edit the labels in the tab list (
tabs) to the values you want. - If you need one, connect an action to
onChangedto run when the tab changes. - Adjust the indicator, label colors, scrolling (
isScrollable), and more as needed.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
index | Currently selected tab | 0 | Integer |
tabs | Tab list (each tab is a label) | Three empty tabs | List |
isScrollable | Allow horizontal scrolling when there are many tabs | Off (false) | true / false |
padding | Padding around the whole tab bar | Not set | Padding |
indicatorColor | Color of the indicator (selection line) | Not set | Color |
indicatorWeight | Indicator thickness | 2 | Number |
indicatorPadding | Padding around the indicator | 0 | Padding |
indicator | Indicator decoration | Not set | Decoration |
indicatorSize | What the indicator width is based on | tab | tab, label |
automaticIndicatorColorAdjustment | Adjust the indicator color automatically | On (true) | true / false |
dividerColor | Color of the divider line | Not set | Color |
labelColor | Color of the selected label | Not set | Color |
labelStyle | Style of the selected label | Not set | Text style |
labelPadding | Padding around labels | Not set | Padding |
unselectedLabelColor | Color of unselected labels | Not set | Color |
unselectedLabelStyle | Style of unselected labels | Not set | Text style |
dragStartBehavior | Behavior when a drag starts | start | start, down |
overlayColor | Color of the touch overlay | Not set | Color |
mouseCursor | Mouse cursor | Not set | Cursor |
enableFeedback | Use touch feedback | Not set | true / false |
physics | Scrolling behavior | Not set | Scroll physics |
Notes and tips
Set indicatorSize to label and the indicator matches the label width; set it to tab and it spans the full tab.
When you have more tabs than fit on screen, turn on isScrollable so the bar scrolls horizontally.
Learn more
For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit TabBar Widget Control.