Styles and objects documented?

How-to
1

Hi a question about styles and objects. Is it documented with pictures how the styles interact with each of the lv object? Example would be tabview buttons when on the left side what controls the button width?

1 Like
2

Each object type has a “Styles” section which explains the basic correspondence between the style and the relevant part of the object.

Aside from that, the rest can be learned through experimentation or a quick read of the code for that object.

3

I started using the alien theme. It changed the tabview buttons on the left side. The default seems to want to stack the button text vertically. So I have added padding and have gotten the text to layout horizontally. But padding is not the right way to do this since it leaved the button background thinner than the text.

How do I set the button width? for the matrix buttons on the tabview when set on the left hand side.

This is what I get with the padding set bigger. You can see the button background is outlined.

20191224_221132
20191224_221132.jpg4160Ă—3120 3.58 MB

This is what I get with the normal padding. the button text is messed up.

20191224_222539
20191224_222539.jpg4160Ă—3120 3.92 MB
Thanks

4

Your problem appears to be an issue on our end. In horizontal mode, the tabview buttons only size themselves to be the width of one character.

I think this should probably be solved on our end, but you could try increasing the padding of LV_TABVIEW_STYLE_BTN_[REL/PR] instead of LV_TABVIEW_STYLE_BTN_BG.

5

Thanks for the information. the tabview_realign is function where a lot of placement and sizing happens. Good to know.

I found a work around with this code right after creating the “On” and “Off” tabs.
// set the left button width
lv_tabview_ext_t * ext1 = (lv_tabview_ext_t *)lv_obj_get_ext_attr(tabviewOnOff);
lv_obj_set_width(ext1->btns, 70);
lv_obj_set_width(ext1->indic, 0);
lv_obj_align(ext1->indic, ext1->btns, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);

The indicator was still in the middle of the button so I removed it.

But it looks like tabview_realign if called again will reset it. But for now its working.

Thanks

1 Like
6

LEFT/RIGHT button placement is designed to use vertical texts.

To make text vertical just add a new line after each letter:

    lv_tabview_add_tab(tv, "O\nf\nf");