Tab View (lv_tabview)

Organize content into tabs. Tab buttons can sit on any side of the view.

Overview

Tab View organizes content into tabs. It is built from other widgets:

• Main container: base widget
• Tab buttons: an base widget with Button (lv_button)
• Container for the tabs: base widget
• Content of the tabs: base widget

The tab buttons can be positioned on the top, bottom, left, and right side of the Tab View.

A new tab can be selected either by clicking on a tab button or by sliding horizontally on the content.

Styling

There are no special parts on the Tab View but the base widget and Button (lv_button) Widgets are used to create the Tab View.

Creating a Tab View

lv_tabview_create(parent) creates a new empty Tab View.

Adding tabs

New tabs can be added with lv_tabview_add_tab(tabview, "Tab name"). This will return a pointer to a base widget where the tab's content can be created.

Renaming tabs

A tab can be renamed with lv_tabview_set_tab_text(tabview, tab_id, "New Name").

Navigating to a new tab

To select a new tab you can:

• Click on its tab button
• Slide horizontally
• Use lv_tabview_set_active(tabview, tab_id, LV_ANIM_ON / OFF) function

The horizontal swipe gesture lives on the content container, so it can be disabled by removing the LV_OBJ_FLAG_SCROLLABLE flag from lv_tabview_get_content(tabview). After that, tabs can only be switched by tapping a tab button or by calling lv_tabview_set_active.

Setting tab bar position

Using the lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT/RIGHT/TOP/BOTTOM) the tab bar can be moved to any side.

Setting tab bar size

The size of the tab bar can be adjusted by lv_tabview_set_tab_bar_size(tabview, size). When tabs are on the top or bottom, this means the height of the tab bar, and when they are on the sides, it means the width.

Tab bar style

The tab view exposes three independent style targets: the tab view body, the tab bar container, and individual tab buttons. Each can be styled separately to customize background, padding, indicator colors, and per-tab accents.

Accessing the parts

• lv_tabview_get_content(tabview) returns a pointer to the container for tabs content (a base widget)
• lv_tabview_get_tab_bar(tabview) returns a pointer to the container for tab buttons (a base widget)
• lv_tabview_get_tab_button(tabview, idx) returns a pointer to a specific tab button (a Button (lv_button))
• lv_tabview_get_tab_count(tabview) returns how many tabs the tab view currently has

Tab button content

Tab buttons are regular widgets, so additional children — such as a switch, icon, or status indicator — can be parented to a tab button to enrich its caption without replacing the default tab bar.

Events

LV_EVENT_VALUE_CHANGED is sent when a new tab is selected by sliding or clicking the tab button. lv_tabview_get_tab_active(tabview) returns the zero based index of the current tab.

Learn more about Events emitted by all Widgets.

Keys

Keys have effect only on the tab buttons. Programmatically add these buttons to a group if required.

Learn more about Keys.