github-code/lvgl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(style) add 'inherit' and 'initial' CSS properties (#3390)

Browse Source 
Fixes #3086
This commit is contained in:
embeddedt
2022-06-09 20:20:34 -04:00
committed by GitHub
parent 03c43d95ad
commit 9a48de0f8b
10 changed files with 312 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/overview/style-props.md
View File

@@ -385,7 +385,7 @@ Sets whether the border should be drawn before or after the children are drawn.
Properties to describe the outline. It's like a border but drawn outside of the rectangles.
### outline_width
Set the width of the outline in pixels.
Set the width of the outline in pixels.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -433,7 +433,7 @@ Set the width of the shadow in pixels. The value should be >= 0.
</ul>
### shadow_ofs_x
Set an offset on the shadow in pixels in X direction.
Set an offset on the shadow in pixels in X direction.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -442,7 +442,7 @@ Set an offset on the shadow in pixels in X direction.
</ul>
### shadow_ofs_y
Set an offset on the shadow in pixels in Y direction.
Set an offset on the shadow in pixels in Y direction.
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -538,7 +538,7 @@ Set the gap between dashes in pixel. Note that dash works only on horizontal and
</ul>
### line_rounded
Make the end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending
Make the end points of the lines rounded. `true`: rounded, `false`: perpendicular line ending
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -577,7 +577,7 @@ Set the width (thickness) of the arcs in pixel.
</ul>
### arc_rounded
Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular line ending
Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular line ending
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -634,7 +634,7 @@ Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully
</ul>
### text_font
Set the font of the text (a pointer `lv_font_t *`).
Set the font of the text (a pointer `lv_font_t *`).
<ul>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_FONT_DEFAULT`</li>
<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>

17
docs/overview/style.md
View File

@@ -84,6 +84,23 @@ Inheritance is applied only if the given property is not set in the object's sty
In this case, if the property is inheritable, the property's value will be searched in the parents until an object specifies a value for the property. The parents will use their own state to determine the value.
So if a button is pressed, and the text color comes from here, the pressed text color will be used.
## Forced value inheritance/default value
Sometimes you may want to force a child object to use the parent's value for a given style property. To do this you can use
one of the following (depending on what type of style you're using):
```c
/* regular style */
lv_style_set_prop_meta(&style, LV_STYLE_TEXT_COLOR, LV_STYLE_PROP_META_INHERIT);
/* local style */
lv_obj_set_local_style_prop_meta(child, LV_STYLE_TEXT_COLOR, LV_STYLE_PROP_META_INHERIT, LV_PART_MAIN);
```
This acts like a value has been set on the style, so setting the value of the property afterwards will remove the flag.
You may also want to force the default value of a property to be used, without needing to hardcode it in your application.
To do this you can use the same API but with `LV_STYLE_PROP_META_INITIAL` instead. In future versions of LVGL, this
will use the value based upon the current theme, but for now it just selects the internal default regardless of theme.
## Parts
Objects can be composed of *parts* which may each have their own styles.