Mirrors_UI_SDK/lvgl
1
0
Fork 0
mirror of https://github.com/lvgl/lvgl.git synced 2026-05-21 22:52:46 +08:00
Code Issues Actions 59 Packages Projects Releases Wiki Activity

feat(xml): support selector with local styles (#9184)

Browse Source 
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Co-authored-by: Liam Howatt <30486941+liamHowatt@users.noreply.github.com>
This commit is contained in:
Gabor Kiss-Vamosi
2025-11-24 09:32:42 +01:00
committed by GitHub
parent 444756b641
commit c86b90772a
11 changed files with 192 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/details/xml/ui_elements/styles.rst
+6 -1
View File
@@ -76,7 +76,12 @@ Local styles can be used directly, for example:
<lv_label style_bg_opa="200" style_bg_color="0x123456"/>
Selectors are not supported for local style properties yet.
Selectors are also supported for local style properties:
.. code-block:: xml
<lv_slider style_bg_opa-indicator-pressed="200"/>
Local Style Binding
docs/src/details/xml/xml/syntax.rst
+24 -10
View File
@@ -5,28 +5,43 @@
Syntax
======
Overview
********
The XML engine uses standard XML syntax; however, there are some
special conventions for property names and values.
Naming conventions
Naming Conventions
******************
- A standard XML syntax is used.
- Lowercase letters with ``_`` separation are used for attribute names.
- Tag names follow the usual variable-name rules: they must start with a letter or
``'_'`` and the rest of the name may be comprised of letters, ``'_'`` and digits.
- ``-`` is used to create compound names, e.g. ``lv_chart-series``
- The LVGL API is followed as much as possible, e.g., ``align="center"``, ``bg_color="0xff0000"``.
- For colors, all these syntaxes are supported (similar to CSS colors): ``0x112233``,
``#112233``, ``112233``, ``0x123``, ``#123``, ``123``. Note that like CSS,
``0x123``, ``#123`` and ``123`` all mean ``#112233``.
- ``params`` can be referenced with ``$``.
- ``consts`` can be referenced with ``#``.
- ``styles`` can be attached to states and/or parts like this:
``styles="style1 style2:pressed style3:focused:scrollbar"``.
- Local styles (i.e. styles that are stored within the Component and thus not shared
by any other Components) can be used like this:
``<lv_label style_text_color="0xff0000" style_text_color:checked="0x00ff00"/>``.
Property Names
**************
In most of the cases XML property names don't have special syntax.
for example:
.. code-block:: xml
<some_tag prop="value" other_prop="other value"/>
Local styles also support adding "selectors" to property names:
.. code-block:: xml
<lv_checkbox style_bg_color-indicator-checked-disabled="0xff0000"/>
Types
*****
@@ -133,10 +148,8 @@ Compound types
Types can be compound, meaning multiple options/types are possible. For example, for
width: ``type="px|%|content"``.
Limiting accepted values
------------------------
Limiting Accepted Values
************************
**Not supported yet; the examples below illustrate the planned syntax.**
@@ -146,3 +159,4 @@ For example:
- Enums: ``type="dir(top bottom)"``
- Colors: ``type="color(0xff0000 0x00ff00 0x0000ff)"``
- Strings: ``type="string('Ok' 'Cancel')``
examples/others/xml/view.xml
+19 -6
View File
@@ -9,11 +9,24 @@
<style name="btn_pr_style" bg_opa="255"/>
</styles>
<view width="280" height="content"
flex_flow="column">
<my_button/>
<my_button/>
<my_button/>
<my_button/>
<view extends="lv_obj" name="main" width="280" height="content" style_bg_color="#light_blue"
style_layout="grid" style_grid_column_dsc_array="100 fr(1)" style_grid_row_dsc_array="50 200"
>
<lv_obj style_grid_cell_column_pos="0" style_grid_cell_column_span="1" style_grid_cell_x_align="stretch"
style_grid_cell_row_pos="0" style_grid_cell_row_span="1" style_grid_cell_y_align="stretch">
<lv_label text="0/0"/>
</lv_obj>
<lv_obj style_grid_cell_column_pos="0" style_grid_cell_column_span="1" style_grid_cell_x_align="stretch"
style_grid_cell_row_pos="1" style_grid_cell_row_span="1" style_grid_cell_y_align="stretch">
<lv_label text="0/1"/>
</lv_obj>
<lv_obj style_grid_cell_column_pos="1" style_grid_cell_column_span="1" style_grid_cell_x_align="stretch"
style_grid_cell_row_pos="0" style_grid_cell_row_span="1" style_grid_cell_y_align="stretch">
<lv_label text="1/0"/>
</lv_obj>
<lv_obj style_grid_cell_column_pos="1" style_grid_cell_column_span="1" style_grid_cell_x_align="stretch"
style_grid_cell_row_pos="1" style_grid_cell_row_span="1" style_grid_cell_y_align="stretch">
<lv_label text="1/1"/>
</lv_obj>
</view>
</component>
src/xml/lv_xml_component.c
-1
View File
@@ -282,7 +282,6 @@ lv_result_t lv_xml_component_unregister(const char * name)
}
lv_ll_clear(&scope->param_ll);
lv_xml_font_t * font;
LV_LL_READ(&scope->font_ll, font) {
lv_free((char *)font->name);
src/xml/lv_xml_style.c
+3 -3
View File
@@ -332,15 +332,15 @@ const char * lv_xml_style_string_process(char * txt, lv_style_selector_t * selec
{
*selector = 0;
char * style_name = lv_xml_split_str(&txt, ':');
char * selector_str = lv_xml_split_str(&txt, ':');
char * style_name = lv_xml_split_str(&txt, '-');
char * selector_str = lv_xml_split_str(&txt, '-');
while(selector_str != NULL) {
/* Handle different states and parts */
*selector |= lv_xml_style_state_to_enum(selector_str);
*selector |= lv_xml_style_part_to_enum(selector_str);
/* Move to the next token */
selector_str = lv_xml_split_str(&txt, ':');
selector_str = lv_xml_split_str(&txt, '-');
}
return style_name;
tests/src/test_assets/xml/view2.xml
+1 -1
View File
@@ -26,7 +26,7 @@
<lv_scale-section min_value="30" max_value="60" style_indicator="scale_sectoion_indic"/>
</lv_scale>
<lv_table column_count="4" style_border_side:items="full">
<lv_table column_count="4" style_border_side-items="full">
<lv_table-column column="1" width="30px"/>
<lv_table-column column="3" width="20px"/>
<lv_table-cell row="2" column="1" value="hello hello hello hello" ctrl="text_crop|merge_right"/>
tests/src/test_cases/xml/test_xml_general.c
+2 -2
View File
@@ -214,7 +214,7 @@ void test_xml_component_styles(void)
" <style name=\"rel_style\" bg_color=\"0xff0000\"/>"
" <style name=\"pr_style\" bg_color=\"0x800000\"/>"
" </styles>"
" <view extends=\"lv_button\" style_text_color=\"0x0000ff\" style_text_color:checked=\"0xa0a0ff\">"
" <view extends=\"lv_button\" style_text_color=\"0x0000ff\" style_text_color-checked=\"0xa0a0ff\">"
" <style name=\"rel_style\"/>"
" <style name=\"pr_style\" selector=\"checked\"/>"
" <lv_label/>"
@@ -249,7 +249,7 @@ void test_xml_error_resilience_syntax_ok(void)
" <style bg_color=\"0x800000\"/>"
" </styles>"
""
" <view extends=\"not_a_widget\" style_text_color=\"0x0000ff\" style_text_color:checked=\"0x8080ff\">"
" <view extends=\"not_a_widget\" style_text_color=\"0x0000ff\" style_text_color-checked=\"0x8080ff\">"
" <unknown/>"
" <lv_label not_an_attr=\"40\"/>"
" </view>"
tests/src/test_cases/xml/test_xml_scale.c
+2 -2
View File
@@ -26,8 +26,8 @@ void test_xml_scale_with_attrs(void)
"max_value", "150",
"total_tick_count", "16",
"major_tick_every", "3",
"style_length:indicator", "10",
"style_transform_rotation:indicator", "300",
"style_length-indicator", "10",
"style_transform_rotation-indicator", "300",
NULL, NULL,
};
tests/src/test_cases/xml/test_xml_style.c
+21 -4
View File
@@ -211,7 +211,7 @@ void test_xml_style_binding(void)
void test_xml_style_prop_binding(void)
{
const char * comp1_xml = {
const char * comp1_xml =
"<component>"
" <subjects>"
" <int name=\"subject1\" value=\"128\"/>"
@@ -221,12 +221,13 @@ void test_xml_style_prop_binding(void)
" <bind_style_prop prop=\"bg_opa\" selector=\"scrollbar|checked\" subject=\"subject1\"/>"
" <bind_style_prop prop=\"bg_color\" selector=\"scrollbar|checked\" subject=\"subject2\"/>"
" </view>"
"</component>"
};
"</component>";
lv_xml_register_component_from_data("comp1", comp1_xml);
lv_xml_component_unregister("comp1");
return;
lv_obj_t * obj = lv_xml_create(lv_screen_active(), "comp1", NULL);
lv_obj_add_state(obj, LV_STATE_CHECKED);
lv_test_wait(1000); /*Wait for transitions*/
@@ -242,6 +243,22 @@ void test_xml_style_prop_binding(void)
TEST_ASSERT_EQUAL_INT(20, lv_obj_get_style_bg_opa(obj, LV_PART_SCROLLBAR | LV_STATE_CHECKED));
TEST_ASSERT_EQUAL_COLOR(lv_color_hex(0xff00ff), lv_obj_get_style_bg_color(obj, LV_PART_SCROLLBAR | LV_STATE_CHECKED));
}
void test_xml_style_local(void)
{
const char * comp1_xml = {
"<component>"
" <view style_bg_color-checked-pressed-scrollbar=\"0xf00\"/>"
"</component>"
};
lv_xml_register_component_from_data("comp1", comp1_xml);
lv_obj_t * obj = lv_xml_create(lv_screen_active(), "comp1", NULL);
TEST_ASSERT_EQUAL_COLOR(lv_color_hex(0xff0000), lv_obj_get_style_bg_color(obj,
LV_PART_SCROLLBAR | LV_STATE_CHECKED | LV_STATE_PRESSED));
}
#endif
tests/src/test_cases/xml/test_xml_table.c
+1 -1
View File
@@ -20,7 +20,7 @@ void test_xml_table_with_attrs(void)
const char * table_attrs[] = {
"width", "content",
"style_border_side:items", "full",
"style_border_side-items", "full",
NULL, NULL,
};
xmls/lv_obj.xml
+113 -113
View File
@@ -214,134 +214,134 @@ Example
<prop name="scroll_snap_y" type="enum:lv_scroll_snap" help="Snap children vertically"/>
<prop name="scrollbar_mode" type="enum:lv_scrollbar_mode" help="Set the scrollbar mode"/>
<prop name="style_x" type="coords" help="Set X position (px, or %)"/>
<prop name="style_y" type="coords" help="Set Y position (px, or %)"/>
<prop name="style_height" type="coords" help="Set height (px, %, or content)"/>
<prop name="style_min_height" type="coords" help="Set min height (px, %, or content)"/>
<prop name="style_max_height" type="coords" help="Set max height (px, %, or content)"/>
<prop name="style_width" type="coords" help="Set width (px, %, or content)"/>
<prop name="style_min_width" type="coords" help="Set min width (px, %, or content)"/>
<prop name="style_max_width" type="coords" help="Set max width (px, %, or content)"/>
<prop name="style_length" type="coords" help="Set length (used by some widgets)"/>
<prop name="style_x-selector" type="coords" help="Set X position (px, or %)"/>
<prop name="style_y-selector" type="coords" help="Set Y position (px, or %)"/>
<prop name="style_height-selector" type="coords" help="Set height (px, %, or content)"/>
<prop name="style_min_height-selector" type="coords" help="Set min height (px, %, or content)"/>
<prop name="style_max_height-selector" type="coords" help="Set max height (px, %, or content)"/>
<prop name="style_width-selector" type="coords" help="Set width (px, %, or content)"/>
<prop name="style_min_width-selector" type="coords" help="Set min width (px, %, or content)"/>
<prop name="style_max_width-selector" type="coords" help="Set max width (px, %, or content)"/>
<prop name="style_length-selector" type="coords" help="Set length (used by some widgets)"/>
<prop name="style_pad_top" type="int" help="Keep this distance on the top from the content inside"/>
<prop name="style_pad_bottom" type="int" help="Keep this distance on the bottom from the content inside"/>
<prop name="style_pad_left" type="int" help="Keep this distance on the left from the content inside"/>
<prop name="style_pad_right" type="int" help="Keep this distance on the right from the content inside"/>
<prop name="style_pad_hor" type="int" help="Set both left and right padding"/>
<prop name="style_pad_ver" type="int" help="Set both top and bottom padding"/>
<prop name="style_pad_all" type="int" help="Set padding in all 4 directions"/>
<prop name="style_pad_row" type="int" help="Set padding between rows of layouts"/>
<prop name="style_pad_column" type="int" help="Set padding between columns of layouts"/>
<prop name="style_pad_radial" type="int" help="Set radial padding"/>
<prop name="style_margin_top" type="int" help="Keep distance above the widget when used in a layout"/>
<prop name="style_margin_bottom" type="int" help="Keep distance below the widget when used in a layout"/>
<prop name="style_margin_left" type="int" help="Keep distance to the left of the widget when used in a layout"/>
<prop name="style_margin_right" type="int" help="Keep distance to the right of the widget when used in a layout"/>
<prop name="style_margin_hor" type="int" help="Set both left and right margin"/>
<prop name="style_margin_ver" type="int" help="Set both top and bottom margin"/>
<prop name="style_margin_all" type="int" help="Set margins in all 4 directions"/>
<prop name="style_pad_top-selector" type="int" help="Keep this distance on the top from the content inside"/>
<prop name="style_pad_bottom-selector" type="int" help="Keep this distance on the bottom from the content inside"/>
<prop name="style_pad_left-selector" type="int" help="Keep this distance on the left from the content inside"/>
<prop name="style_pad_right-selector" type="int" help="Keep this distance on the right from the content inside"/>
<prop name="style_pad_hor-selector" type="int" help="Set both left and right padding"/>
<prop name="style_pad_ver-selector" type="int" help="Set both top and bottom padding"/>
<prop name="style_pad_all-selector" type="int" help="Set padding in all 4 directions"/>
<prop name="style_pad_row-selector" type="int" help="Set padding between rows of layouts"/>
<prop name="style_pad_column-selector" type="int" help="Set padding between columns of layouts"/>
<prop name="style_pad_radial-selector" type="int" help="Set radial padding"/>
<prop name="style_margin_top-selector" type="int" help="Keep distance above the widget when used in a layout"/>
<prop name="style_margin_bottom-selector" type="int" help="Keep distance below the widget when used in a layout"/>
<prop name="style_margin_left-selector" type="int" help="Keep distance to the left of the widget when used in a layout"/>
<prop name="style_margin_right-selector" type="int" help="Keep distance to the right of the widget when used in a layout"/>
<prop name="style_margin_hor-selector" type="int" help="Set both left and right margin"/>
<prop name="style_margin_ver-selector" type="int" help="Set both top and bottom margin"/>
<prop name="style_margin_all-selector" type="int" help="Set margins in all 4 directions"/>
<prop name="style_radius" type="int" help="Set corner radius"/>
<prop name="style_radial_offset" type="int" help="Set radial offset (e.g. on ticks of circular scales)"/>
<prop name="style_align" type="enum:lv_align" help="Set alignment on the parent"/>
<prop name="style_clip_corner" type="bool" help="Enable corner clipping"/>
<prop name="style_base_dir" type="enum:lv_base_dir" help="Set base text dir"/>
<prop name="style_radius-selector" type="int" help="Set corner radius"/>
<prop name="style_radial_offset-selector" type="int" help="Set radial offset (e.g. on ticks of circular scales)"/>
<prop name="style_align-selector" type="enum:lv_align" help="Set alignment on the parent"/>
<prop name="style_clip_corner-selector" type="bool" help="Enable corner clipping"/>
<prop name="style_base_dir-selector" type="enum:lv_base_dir" help="Set base text dir"/>
<prop name="style_bg_color" type="color" help="Set bg color"/>
<prop name="style_bg_opa" type="opa" help="Set background opacity"/>
<prop name="style_bg_grad_dir" type="enum:lv_grad_dir" help="Set background gradient type"/>
<prop name="style_bg_main_stop" type="int" help="Set gradient main stop"/>
<prop name="style_bg_grad_stop" type="int" help="Set gradient second stop"/>
<prop name="style_bg_grad_color" type="color" help="Set gradient color"/>
<prop name="style_bg_color-selector" type="color" help="Set bg color"/>
<prop name="style_bg_opa-selector" type="opa" help="Set background opacity"/>
<prop name="style_bg_grad_dir-selector" type="enum:lv_grad_dir" help="Set background gradient type"/>
<prop name="style_bg_main_stop-selector" type="int" help="Set gradient main stop"/>
<prop name="style_bg_grad_stop-selector" type="int" help="Set gradient second stop"/>
<prop name="style_bg_grad_color-selector" type="color" help="Set gradient color"/>
<prop name="style_bg_image_src" type="image" help="Set background image"/>
<prop name="style_bg_image_tiled" type="bool" help="Tile background image"/>
<prop name="style_bg_image_recolor" type="color" help="Recolor the background image"/>
<prop name="style_bg_image_recolor_opa" type="opa" help="Set the recolor intensity"/>
<prop name="style_bg_image_src-selector" type="image" help="Set background image"/>
<prop name="style_bg_image_tiled-selector" type="bool" help="Tile background image"/>
<prop name="style_bg_image_recolor-selector" type="color" help="Recolor the background image"/>
<prop name="style_bg_image_recolor_opa-selector" type="opa" help="Set the recolor intensity"/>
<prop name="style_border_color" type="color" help="Set border color"/>
<prop name="style_border_width" type="int" help="Set border width"/>
<prop name="style_border_opa" type="opa" help="Set border opacity"/>
<prop name="style_border_side" type="enum:lv_border_side" help="Set border sides"/>
<prop name="style_border_post" type="bool" help="Draw border after content"/>
<prop name="style_border_color-selector" type="color" help="Set border color"/>
<prop name="style_border_width-selector" type="int" help="Set border width"/>
<prop name="style_border_opa-selector" type="opa" help="Set border opacity"/>
<prop name="style_border_side-selector" type="enum:lv_border_side" help="Set border sides"/>
<prop name="style_border_post-selector" type="bool" help="Draw border after content"/>
<prop name="style_outline_color" type="color" help="Set outline color"/>
<prop name="style_outline_width" type="int" help="Set outline width"/>
<prop name="style_outline_opa" type="opa" help="Set outline opacity"/>
<prop name="style_outline_pad" type="int" help="Set outline spacing"/>
<prop name="style_outline_color-selector" type="color" help="Set outline color"/>
<prop name="style_outline_width-selector" type="int" help="Set outline width"/>
<prop name="style_outline_opa-selector" type="opa" help="Set outline opacity"/>
<prop name="style_outline_pad-selector" type="int" help="Set outline spacing"/>
<prop name="style_shadow_width" type="int" help="Set shadow size"/>
<prop name="style_shadow_color" type="color" help="Set shadow color"/>
<prop name="style_shadow_opa" type="opa" help="Set shadow opacity"/>
<prop name="style_shadow_offset_x" type="int" help="Set shadow X offset"/>
<prop name="style_shadow_offset_y" type="int" help="Set shadow Y offset"/>
<prop name="style_shadow_spread" type="int" help="Assume that the base rectangle is larger by this"/>
<prop name="style_shadow_width-selector" type="int" help="Set shadow size"/>
<prop name="style_shadow_color-selector" type="color" help="Set shadow color"/>
<prop name="style_shadow_opa-selector" type="opa" help="Set shadow opacity"/>
<prop name="style_shadow_offset_x-selector" type="int" help="Set shadow X offset"/>
<prop name="style_shadow_offset_y-selector" type="int" help="Set shadow Y offset"/>
<prop name="style_shadow_spread-selector" type="int" help="Assume that the base rectangle is larger by this"/>
<prop name="style_text_color" type="color" help="Set text color"/>
<prop name="style_text_opa" type="opa" help="Set text opacity"/>
<prop name="style_text_font" type="font" help="Set font"/>
<prop name="style_text_align" type="enum:lv_text_align" help="Set text align"/>
<prop name="style_text_letter_space" type="int" help="Set letter spacing"/>
<prop name="style_text_line_space" type="int" help="Set line spacing"/>
<prop name="style_text_decor" type="enum:lv_text_decor" help="Set text decor"/>
<prop name="style_text_color-selector" type="color" help="Set text color"/>
<prop name="style_text_opa-selector" type="opa" help="Set text opacity"/>
<prop name="style_text_font-selector" type="font" help="Set font"/>
<prop name="style_text_align-selector" type="enum:lv_text_align" help="Set text align"/>
<prop name="style_text_letter_space-selector" type="int" help="Set letter spacing"/>
<prop name="style_text_line_space-selector" type="int" help="Set line spacing"/>
<prop name="style_text_decor-selector" type="enum:lv_text_decor" help="Set text decor"/>
<prop name="style_image_opa" type="opa" help="Set image opacity"/>
<prop name="style_image_recolor" type="color" help="Recolor image"/>
<prop name="style_image_recolor_opa" type="opa" help="Set recolor opacity"/>
<prop name="style_image_opa-selector" type="opa" help="Set image opacity"/>
<prop name="style_image_recolor-selector" type="color" help="Recolor image"/>
<prop name="style_image_recolor_opa-selector" type="opa" help="Set recolor opacity"/>
<prop name="style_line_width" type="int" help="Set line width"/>
<prop name="style_line_color" type="color" help="Set line color"/>
<prop name="style_line_opa" type="opa" help="Set line opacity"/>
<prop name="style_line_dash_width" type="int" help="Set dash width"/>
<prop name="style_line_dash_gap" type="int" help="Set dash gap"/>
<prop name="style_line_rounded" type="bool" help="Round line ends"/>
<prop name="style_line_width-selector" type="int" help="Set line width"/>
<prop name="style_line_color-selector" type="color" help="Set line color"/>
<prop name="style_line_opa-selector" type="opa" help="Set line opacity"/>
<prop name="style_line_dash_width-selector" type="int" help="Set dash width"/>
<prop name="style_line_dash_gap-selector" type="int" help="Set dash gap"/>
<prop name="style_line_rounded-selector" type="bool" help="Round line ends"/>
<prop name="style_arc_width" type="int" help="Set arc width"/>
<prop name="style_arc_color" type="color" help="Set arc color"/>
<prop name="style_arc_opa" type="opa" help="Set arc opacity"/>
<prop name="style_arc_rounded" type="bool" help="Round arc ends"/>
<prop name="style_arc_image_src" type="image" help="Set arc image"/>
<prop name="style_arc_width-selector" type="int" help="Set arc width"/>
<prop name="style_arc_color-selector" type="color" help="Set arc color"/>
<prop name="style_arc_opa-selector" type="opa" help="Set arc opacity"/>
<prop name="style_arc_rounded-selector" type="bool" help="Round arc ends"/>
<prop name="style_arc_image_src-selector" type="image" help="Set arc image"/>
<prop name="style_layout" type="enum:lv_layout" help="Set layout type"/>
<prop name="style_layout-selector" type="enum:lv_layout" help="Set layout type"/>
<prop name="style_flex_flow" type="enum:lv_flex_flow" help="Set how flex should flow the children (row, column, etc)"/>
<prop name="style_flex_main_place" type="enum:lv_flex_align" help="Set main axis align (horizontal with flex_flow=row)"/>
<prop name="style_flex_cross_place" type="enum:lv_flex_align" help="Set cross axis align (vertical with flex_flow=row)"/>
<prop name="style_flex_track_place" type="enum:lv_flex_align" help="Set track align"/>
<prop name="style_flex_grow" type="int" help="Set flex grow to fill the available space in the track"/>
<prop name="style_flex_flow-selector" type="enum:lv_flex_flow" help="Set how flex should flow the children (row, column, etc)"/>
<prop name="style_flex_main_place-selector" type="enum:lv_flex_align" help="Set main axis align (horizontal with flex_flow=row)"/>
<prop name="style_flex_cross_place-selector" type="enum:lv_flex_align" help="Set cross axis align (vertical with flex_flow=row)"/>
<prop name="style_flex_track_place-selector" type="enum:lv_flex_align" help="Set track align"/>
<prop name="style_flex_grow-selector" type="int" help="Set flex grow to fill the available space in the track"/>
<prop name="style_grid_column_dsc_array" type="grid_dsc[LV_GRID_TEMPLATE_LAST]" help="Set column descriptor array"/>
<prop name="style_grid_row_dsc_array" type="grid_dsc[LV_GRID_TEMPLATE_LAST]" help="Set row descriptor array"/>
<prop name="style_grid_column_align" type="enum:lv_grid_align" help="Where to align the columns"/>
<prop name="style_grid_row_align" type="enum:lv_grid_align" help="Where to align the rows"/>
<prop name="style_grid_cell_column_pos" type="int" help="Set cell's column"/>
<prop name="style_grid_cell_column_span" type="int" help="How many columns the cell should span"/>
<prop name="style_grid_cell_x_align" type="enum:lv_grid_align" help="How to align the cell horizontally"/>
<prop name="style_grid_cell_row_pos" type="int" help="Set cell's row"/>
<prop name="style_grid_cell_row_span" type="int" help="How many rows the cell should span"/>
<prop name="style_grid_cell_y_align" type="enum:lv_grid_align" help="How to align the cell vertically"/>
<prop name="style_grid_column_dsc_array-selector" type="grid_dsc[LV_GRID_TEMPLATE_LAST]" help="Set column descriptor array"/>
<prop name="style_grid_row_dsc_array-selector" type="grid_dsc[LV_GRID_TEMPLATE_LAST]" help="Set row descriptor array"/>
<prop name="style_grid_column_align-selector" type="enum:lv_grid_align" help="Where to align the columns"/>
<prop name="style_grid_row_align-selector" type="enum:lv_grid_align" help="Where to align the rows"/>
<prop name="style_grid_cell_column_pos-selector" type="int" help="Set cell's column"/>
<prop name="style_grid_cell_column_span-selector" type="int" help="How many columns the cell should span"/>
<prop name="style_grid_cell_x_align-selector" type="enum:lv_grid_align" help="How to align the cell horizontally"/>
<prop name="style_grid_cell_row_pos-selector" type="int" help="Set cell's row"/>
<prop name="style_grid_cell_row_span-selector" type="int" help="How many rows the cell should span"/>
<prop name="style_grid_cell_y_align-selector" type="enum:lv_grid_align" help="How to align the cell vertically"/>
<prop name="style_opa" type="opa" help="Scale down the opacity of the widget and all its children"/>
<prop name="style_opa_layered" type="opa" help="Create a snapshot from the widget and blend it with opacity"/>
<prop name="style_anim_duration" type="int" help="Set animation duration in ms (e.g. for label scroll)"/>
<prop name="style_blend_mode" type="enum:lv_blend_mode" help="Set how to blend colors"/>
<prop name="style_transform_width" type="int" help="Change the width without affecting the layouts"/>
<prop name="style_transform_height" type="int" help="Change the height without affecting the layouts"/>
<prop name="style_translate_x" type="int" help="Offset in X after the layouts are calculated"/>
<prop name="style_translate_y" type="int" help="Offset in Y after the layouts are calculated"/>
<prop name="style_translate_radial" type="int" help="Translate radial"/>
<prop name="style_transform_scale_x" type="int" help="Scale X (256=100%)"/>
<prop name="style_transform_scale_y" type="int" help="Scale Y (256=100%)"/>
<prop name="style_transform_rotation" type="int" help="Rotate (0.1° units)"/>
<prop name="style_transform_pivot_x" type="int" help="Set pivot X"/>
<prop name="style_transform_pivot_y" type="int" help="Set pivot Y"/>
<prop name="style_transform_skew_x" type="int" help="Skew X (no SW render)"/>
<prop name="style_transform_skew_y" type="int" help="Skew Y (no SW render)"/>
<prop name="style_bitmap_mask_src" type="image" help="Set bitmap mask (A8 or L8)"/>
<prop name="style_rotary_sensitivity" type="int" help="Set rotary sensitivity for Crown input devices"/>
<prop name="style_recolor" type="color" help="Mix this color to the widget and all its children"/>
<prop name="style_recolor_opa" type="opa" help="The intensity of recoloring"/>
<prop name="style_opa-selector" type="opa" help="Scale down the opacity of the widget and all its children"/>
<prop name="style_opa_layered-selector" type="opa" help="Create a snapshot from the widget and blend it with opacity"/>
<prop name="style_anim_duration-selector" type="int" help="Set animation duration in ms (e.g. for label scroll)"/>
<prop name="style_blend_mode-selector" type="enum:lv_blend_mode" help="Set how to blend colors"/>
<prop name="style_transform_width-selector" type="int" help="Change the width without affecting the layouts"/>
<prop name="style_transform_height-selector" type="int" help="Change the height without affecting the layouts"/>
<prop name="style_translate_x-selector" type="int" help="Offset in X after the layouts are calculated"/>
<prop name="style_translate_y-selector" type="int" help="Offset in Y after the layouts are calculated"/>
<prop name="style_translate_radial-selector" type="int" help="Translate radial"/>
<prop name="style_transform_scale_x-selector" type="int" help="Scale X (256=100%)"/>
<prop name="style_transform_scale_y-selector" type="int" help="Scale Y (256=100%)"/>
<prop name="style_transform_rotation-selector" type="int" help="Rotate (0.1° units)"/>
<prop name="style_transform_pivot_x-selector" type="int" help="Set pivot X"/>
<prop name="style_transform_pivot_y-selector" type="int" help="Set pivot Y"/>
<prop name="style_transform_skew_x-selector" type="int" help="Skew X (no SW render)"/>
<prop name="style_transform_skew_y-selector" type="int" help="Skew Y (no SW render)"/>
<prop name="style_bitmap_mask_src-selector" type="image" help="Set bitmap mask (A8 or L8)"/>
<prop name="style_rotary_sensitivity-selector" type="int" help="Set rotary sensitivity for Crown input devices"/>
<prop name="style_recolor-selector" type="color" help="Mix this color to the widget and all its children"/>
<prop name="style_recolor_opa-selector" type="opa" help="The intensity of recoloring"/>
<prop name="flex_grow" type="int" help="Set flex grow to fill the available space in the track"/>
<prop name="flex_flow" type="enum:lv_flex_flow" help="Set flex flow direction (row, column, etc.)"/>