eez-open
Cannot customize tab headers
Hello everyone!
I'm trying to customize tab view, and I cannot find any parameters what is in charge of tab headers style How can I customize them?
For example, make them transparent
I use EEZStudio v0.23.2
I tried to find the property, but it has effect just on tab contains and not on tab header
Check the Styled Tabview example:
Just add two Container widgets as children to the Tabivew. These container widgets will be for the Bar and Content part. Inside Content you can add Tab widgets:
Then you can modify styles of the Bar widget.
Check the Styled Tabview example:
Just add two Container widgets as children to the Tabivew. These container widgets will be for the Bar and Content part. Inside Content you can add Tab widgets:
Then you can modify styles of the Bar widget.
But, How to change the color or style of the active tab, like this blue of the "Tab1"? @mvladic
According to the Styled Tabview example, I will summarize how we can modify the tabview, Bar container:
- To change the background of the non-active tab(s): to style -> Main part -> DEFAULT -> BACKGROUND properties, you can change the color, opacity...
- To change the text of the non-active tab(s): to style -> Main part -> DEFAULT -> TEXT. Change the properties of the text.
- To change the background of the active tab: to style -> Items part -> CHECKED -> BACKGROUND then change the properties such as Color, Opacity
- To change the text of the active tab, similarly: to style -> Items part -> CHECKED -> TEXT
- To change the active tab underline indicator: to style -> Items part -> CHECKED -> BORDER
Good luck!
According to the Styled Tabview example, I will summarize how we can modify the tabview, Bar container:
- To change the background of the non-active tab(s): to style -> Main part -> DEFAULT -> BACKGROUND properties, you can change the color, opacity...
- To change the text of the non-active tab(s): to style -> Main part -> DEFAULT -> TEXT. Change the properties of the text.
- To change the background of the active tab: to style -> Items part -> CHECKED -> BACKGROUND then change the properties such as Color, Opacity
- To change the text of the active tab, similarly: to style -> Items part -> CHECKED -> TEXT
- To change the active tab underline indicator: to style -> Items part -> CHECKED -> BORDER
Good luck!
The part of 'active' is not working. See the picture below. By the way, I am using v0.24.0.
The issue is related to the LVGL Version selected for the project.
The example project works as long the LVGL version is 8.x, if change to 9.x the border side change it no longer works.
Yeah, I experienced the same issue. With the same configuration, version 9.x does not work but 8.x do. And I noticed that, version 9.x don't have Ticks part.