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



Overview [#overview]

The Tab View Widget can be used to organize content in tabs. The Tab
View 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.

Parts and Styles [#parts-and-styles]

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.

Usage [#usage]

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.

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

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.

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.

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))

Events [#events]

* <ApiLink name="LV_EVENT_VALUE_CHANGED" /> 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.

<Callout type="info" title="Further Reading">
  Learn more about [Events](/common-widget-features/events) emitted by all Widgets.

  Learn more about [events](/common-widget-features/events).
</Callout>

Keys [#keys]

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

<Callout type="info" title="Further Reading">
  Learn more about [Keys](/main-modules/indev/keypad).
</Callout>

Examples [#examples]

Simple Tabview [#simple-tabview]

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

Tabs on the left, styling and no scrolling [#tabs-on-the-left-styling-and-no-scrolling]

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

API [#api]