Tabview

Tab view active tab on creation

Open a specific tab on first display via the active prop.

active takes a 0-based tab index. Setting active="2" makes the third tab ("C") open when the screen first appears, so the user lands directly on a specific tab without having to tap or swipe.

Tab view basic structure

Three tabs hosting plain labels, demonstrating the minimal markup.

An lv_tabview carries three lv_tabview-tab children. The text arg sets each tab's button caption and the children of a tab become its content. No tab_bar_position or active is set, so the bar sits on the top edge and the first tab opens.

Tab view tab bar position

Place the tab bar on any of the four sides.

Four mini tab views lay out a 2×2 grid covering every tab_bar_position value: top, bottom, left, right. Each carries a distinct style_bg_color so the four widgets are easy to tell apart at a glance; only tab_bar_position changes the layout itself.

Tab view styling spots

Three independent style targets: tab view body, tab bar, and a single tab.

The tab view body gets a dark style_bg_color (with style_bg_opa="100%" so it actually paints). The <lv_tabview-tab_bar> element overrides the bar's width, background, and text color. One <lv_tabview-tab> then sets its own bg_color + bg_opa to override only that tab's content area; the others stay transparent and let the tab view body show through. active="1" opens the styled tab first so the per-tab override is immediately visible.

Tab view tab-button content

Attach a child widget to a specific tab button via <lv_tabview-tab_button>.

<lv_tabview-tab_button index="N"> selects the implicit tab button at the given index so additional children can be parented to it after the tab has been created. Both tab buttons here pick up a small lv_switch beside the caption — handy for inline toggles or status indicators without having to build a custom tab bar from scratch. The tab elements come first so the buttons exist by the time the _button references attach to them.