ButtonTabBar
The ButtonTabBar widget is a tab bar whose tabs appear as buttons.
Tap a tab to switch the screen or content.
Example file: 07_Work_with_Widgets/tabbar_buttontabbar_objet.lfp
Definition and role
The ButtonTabBar widget lays out button-shaped tabs, and lets you style the selected and unselected buttons differently. Tapping a tab runs the onChanged action and passes the selected index. It works the same as TabBar — only the look, a button style, differs.
- Category: Contents
- It contains three empty tabs when first placed.
Features
| Feature | Description |
|---|---|
| Tab switching | Tapping a button tab changes the selection and runs onChanged. |
| Button styles | Set the decoration and label style separately for selected and unselected buttons. |
| Tab editing from a script | Add or replace tabs, and read labels, from a script. |
| Layout settings | Adjust the height, padding, spacing, alignment, transition duration, and more. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the ButtonTabBar item onto the canvas.
- Edit the labels in the tab list (
tabs). - Connect the action to run on a tab change to
onChanged. - If needed, adjust the selected and unselected button decorations (
selectedDecorationandunselectedDecoration) along with the height and padding.
Properties
| Property | Description | Default | Value / Type |
|---|---|---|---|
index | Currently selected tab | 0 | Integer |
tabs | Tab list — each tab is a label | 3 empty tabs | List |
duration | Tab transition animation duration | 250 | Number (ms) |
height | Tab bar height | 46 | Number (px) |
selectedDecoration | Decoration of the selected button | Not set | Decoration |
unselectedDecoration | Decoration of unselected buttons | Not set | Decoration |
selectedLabelStyle | Style of the selected label | Not set | Text style |
unselectedLabelStyle | Style of unselected labels | Not set | Text style |
splashColor | Touch splash color | Not set | Color |
contentPadding | Padding inside the button | Horizontal 0 | Insets |
buttonMargin | Margin outside the button | 0 | Insets |
labelSpacing | Gap between labels | 4 | Number |
elevation | Shadow elevation | 0 | Number |
center | Center the tab bar | Off (false) | true / false |
lockScroll&expandButton | Lock scrolling (expand the button width) | Off (false) | true / false |
buttonLabelMainAxisAlignment | Label alignment inside the button | start | start, end, center, spaceBetween, spaceAround, spaceEvenly |
Notes and tips
To make the selected and unselected states look different, set selectedDecoration (selected) and unselectedDecoration (unselected) separately.
The behavior — tab switching and script control — is identical to TabBar. Use ButtonTabBar when you only need the button look.
Learn more
For the full Widget Control (Property, Method, Event) you can use to drive this widget from a script, visit ButtonTabBar Widget Control.