Tabview (lv_tabview)¶
Overview¶
The Tab view object can be used to organize content in tabs. The Tab view is built from other widgets:
Main container: lv_obj)
Tab buttons: lv_btnmatrix
Container for the tabs: lv_obj
Content of the tabs: lv_obj
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¶
There are no special parts on the Tab view but the lv_obj and lv_btnnmatrix widgets are used to create the Tab view.
Usage¶
Create a Tab view¶
lv_tabview_create(parent, tab_pos, tab_size); creates a new empty Tab view. tab_pos can be LV_DIR_TOP/BOTTOM/LEFT/RIGHT to position the tab buttons to a side.
tab_size is the height (in case of LV_DIR_TOP/BOTTOM) or width (in case of LV_DIR_LEFT/RIGHT) tab buttons.
Add tabs¶
New tabs can be added with lv_tabview_add_tab(tabview, "Tab name"). This will return a pointer to an lv_obj object where the tab's content can be created.
Change tab¶
To select a new tab you can:
Click on its tab button
Slide horizontally
Use
lv_tabview_set_act(tabview, id, LV_ANIM_ON/OFF)function
Get the parts¶
lv_tabview_get_content(tabview) returns the container for the tabs, lv_tabview_get_tab_btns(tabview) returns the Tab buttons object which is a Button matrix.
Events¶
LV_EVENT_VALUE_CHANGEDSent when a new tab is selected by sliding or clicking the tab button.lv_tabview_get_tab_act(tabview)returns the zero based index of the current tab.
Learn more about Events.
Keys¶
Keys have effect only on the tab buttons (Button matrix). Add manually to a group if required.
Learn more about Keys.
Example¶
C¶
Simple Tabview¶
code view on GitHub
#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
void lv_example_tabview_1(void)
{
/*Create a Tab view object*/
lv_obj_t *tabview;
tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50);
/*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");
lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "Tab 3");
/*Add content to the tabs*/
lv_obj_t * label = lv_label_create(tab1);
lv_label_set_text(label, "This the first tab\n\n"
"If the content\n"
"of a tab\n"
"becomes too\n"
"longer\n"
"than the\n"
"container\n"
"then it\n"
"automatically\n"
"becomes\n"
"scrollable.\n"
"\n"
"\n"
"\n"
"Can you see it?");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON);
}
#endif
Tabs on the left, styling and no scrolling¶
code view on GitHub
#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
static void scroll_begin_event(lv_event_t * e)
{
/*Disable the scroll animations. Triggered when a tab button is clicked */
if(lv_event_get_code(e) == LV_EVENT_SCROLL_BEGIN) {
lv_anim_t * a = lv_event_get_param(e);
if(a) a->time = 0;
}
}
void lv_example_tabview_2(void)
{
/*Create a Tab view object*/
lv_obj_t *tabview;
tabview = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 80);
lv_obj_add_event_cb(lv_tabview_get_content(tabview), scroll_begin_event, LV_EVENT_SCROLL_BEGIN, NULL);
lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);
lv_obj_t * tab_btns = lv_tabview_get_tab_btns(tabview);
lv_obj_set_style_bg_color(tab_btns, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
lv_obj_set_style_text_color(tab_btns, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);
lv_obj_set_style_border_side(tab_btns, LV_BORDER_SIDE_RIGHT, LV_PART_ITEMS | LV_STATE_CHECKED);
/*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");
lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "Tab 3");
lv_obj_t *tab4 = lv_tabview_add_tab(tabview, "Tab 4");
lv_obj_t *tab5 = lv_tabview_add_tab(tabview, "Tab 5");
lv_obj_set_style_bg_color(tab2, lv_palette_lighten(LV_PALETTE_AMBER, 3), 0);
lv_obj_set_style_bg_opa(tab2, LV_OPA_COVER, 0);
/*Add content to the tabs*/
lv_obj_t * label = lv_label_create(tab1);
lv_label_set_text(label, "First tab");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
label = lv_label_create(tab4);
lv_label_set_text(label, "Forth tab");
label = lv_label_create(tab5);
lv_label_set_text(label, "Fifth tab");
lv_obj_clear_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}
#endif
MicroPython¶
No examples yet.