# Tab View (lv_tabview) (/widgets/tabview)



Overview [#overview]

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

* Main container: [base widget](/widgets/base_widget)
* Tab buttons: an [base widget](/widgets/base_widget) with [Button (lv\_button)](/widgets/button)
* Container for the tabs: [base widget](/widgets/base_widget)
* Content of the tabs: [base widget](/widgets/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 [#styling]

There are no special parts on the Tab View but the [base widget](/widgets/base_widget) and
[Button (lv\_button)](/widgets/button) Widgets are used to create the Tab View.

Creating a Tab View [#creating-a-tab-view]

<ApiLink name="lv_tabview_create" display="lv_tabview_create(parent)" /> creates a new empty Tab View.

Adding tabs [#adding-tabs]

New tabs can be added with <ApiLink name="lv_tabview_add_tab" display="lv_tabview_add_tab(tabview, &#x22;Tab name&#x22;)" />.
This will return a pointer to a [base widget](/widgets/base_widget) where
the tab's content can be created.

<LvglExample name="lv_example_tabview_basic" path="widgets/tabview/lv_example_tabview_basic" />

Renaming tabs [#renaming-tabs]

A tab can be renamed with
<ApiLink name="lv_tabview_set_tab_text" display="lv_tabview_set_tab_text(tabview, tab_id, &#x22;New Name&#x22;)" />.

Navigating to a new tab [#navigating-to-a-new-tab]

To select a new tab you can:

* Click on its tab button
* Slide horizontally
* Use <ApiLink name="lv_tabview_set_active" display="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 <ApiLink name="LV_OBJ_FLAG_SCROLLABLE" /> flag from
<ApiLink name="lv_tabview_get_content" display="lv_tabview_get_content(tabview)" />.
After that, tabs can only be switched by tapping a tab button or by calling
<ApiLink name="lv_tabview_set_active" />.

<LvglExample name="lv_example_tabview_active_tab" path="widgets/tabview/lv_example_tabview_active_tab" />

Setting tab bar position [#setting-tab-bar-position]

Using the <ApiLink name="lv_tabview_set_tab_bar_position" display="lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT/RIGHT/TOP/BOTTOM)" />
the tab bar can be moved to any side.

<LvglExample name="lv_example_tabview_tab_bar_position" path="widgets/tabview/lv_example_tabview_tab_bar_position" />

Setting tab bar size [#setting-tab-bar-size]

The size of the tab bar can be adjusted by <ApiLink name="lv_tabview_set_tab_bar_size" display="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 [#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.

<LvglExample name="lv_example_tabview_tab_bar_style" path="widgets/tabview/lv_example_tabview_tab_bar_style" />

Accessing the parts [#accessing-the-parts]

* <ApiLink name="lv_tabview_get_content" display="lv_tabview_get_content(tabview)" /> returns a pointer to the container for
  tabs content (a [base widget](/widgets/base_widget))
* <ApiLink name="lv_tabview_get_tab_bar" display="lv_tabview_get_tab_bar(tabview)" /> returns a pointer to the container for
  tab buttons (a [base widget](/widgets/base_widget))
* <ApiLink name="lv_tabview_get_tab_button" display="lv_tabview_get_tab_button(tabview, idx)" /> returns a pointer to a
  specific tab button (a [Button (lv\_button)](/widgets/button))
* <ApiLink name="lv_tabview_get_tab_count" display="lv_tabview_get_tab_count(tabview)" /> returns how many tabs the tab view
  currently has

Tab button content [#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.

<LvglExample name="lv_example_tabview_tab_button_content" path="widgets/tabview/lv_example_tabview_tab_button_content" />

Events [#events]

<ApiLink name="LV_EVENT_VALUE_CHANGED" /> is sent when a new tab is selected by sliding
or clicking the tab button. <ApiLink name="lv_tabview_get_tab_active" display="lv_tabview_get_tab_active(tabview)" />
returns the zero based index of the current tab.

Learn more about [Events](/common-widget-features/events) emitted by all Widgets.

Keys [#keys]

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

Learn more about [Keys](/main-modules/indev/keypad).