Style Properties

Size and position

Properties related to size, position, alignment and layout of Widgets.

width

Sets width of Widget. Pixel, percentage and LV_SIZE_CONTENT values can be used. Percentage values are relative to the width of the parent's content area.

• Default Widget dependent
• Inherited No
• Layout Yes
• Ext. draw No

min_width

Sets a minimal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

max_width

Sets a maximal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.

• Default LV_COORD_MAX
• Inherited No
• Layout Yes
• Ext. draw No

height

Sets height of Widget. Pixel, percentage and LV_SIZE_CONTENT can be used. Percentage values are relative to the height of the parent's content area.

• Default Widget dependent
• Inherited No
• Layout Yes
• Ext. draw No

min_height

Sets a minimal height. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

max_height

Sets a maximal height. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area.

• Default LV_COORD_MAX
• Inherited No
• Layout Yes
• Ext. draw No

length

Its meaning depends on the type of Widget. For example in case of lv_scale it means the length of the ticks.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

x

Set X coordinate of Widget considering the align setting. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

y

Set Y coordinate of Widget considering the align setting. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

align

Set the alignment which tells from which point of the parent the X and Y coordinates should be interpreted. Possible values are: LV_ALIGN_DEFAULT, LV_ALIGN_TOP_LEFT/MID/RIGHT, LV_ALIGN_BOTTOM_LEFT/MID/RIGHT, LV_ALIGN_LEFT/RIGHT_MID, LV_ALIGN_CENTER. LV_ALIGN_DEFAULT means LV_ALIGN_TOP_LEFT with LTR base direction and LV_ALIGN_TOP_RIGHT with RTL base direction.

• Default `LV_ALIGN_DEFAULT`
• Inherited No
• Layout Yes
• Ext. draw No

transform_width

Make Widget wider on both sides with this value. Pixel and percentage (with lv_pct(x)) values can be used. Percentage values are relative to Widget's width.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

transform_height

Make Widget higher on both sides with this value. Pixel and percentage (with lv_pct(x)) values can be used. Percentage values are relative to Widget's height.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

translate_x

Move Widget with this value in X direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with lv_pct(x)) values can be used. Percentage values are relative to Widget's width.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

translate_y

Move Widget with this value in Y direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with lv_pct(x)) values can be used. Percentage values are relative to Widget's height.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

translate_radial

Move object around the centre of the parent object (e.g. around the circumference of a scale)

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

transform_scale_x

Zoom Widget horizontally. The value 256 (or LV_SCALE_NONE) means normal size, 128 half size, 512 double size, and so on

• Default 0
• Inherited No
• Layout Yes
• Ext. draw Yes

transform_scale_y

Zoom Widget vertically. The value 256 (or LV_SCALE_NONE) means normal size, 128 half size, 512 double size, and so on

• Default 0
• Inherited No
• Layout Yes
• Ext. draw Yes

transform_rotation

Rotate Widget. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw Yes

transform_pivot_x

Set pivot point's X coordinate for transformations. Relative to Widget's top left corner'

• Default 0
• Inherited No
• Layout No
• Ext. draw No

transform_pivot_y

Set pivot point's Y coordinate for transformations. Relative to Widget's top left corner'

• Default 0
• Inherited No
• Layout No
• Ext. draw No

transform_skew_x

Skew Widget horizontally. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw Yes

transform_skew_y

Skew Widget vertically. The value is interpreted in 0.1 degree units. E.g. 450 means 45 deg.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw Yes

Padding

Properties to describe spacing between the parent's sides and the children and among the children. Very similar to the padding properties in HTML.

pad_top

Sets the padding on the top. It makes the content area smaller in this direction.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

pad_bottom

Sets the padding on the bottom. It makes the content area smaller in this direction.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

pad_left

Sets the padding on the left. It makes the content area smaller in this direction.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

pad_right

Sets the padding on the right. It makes the content area smaller in this direction.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

pad_row

Sets the padding between the rows. Used by the layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

pad_column

Sets the padding between the columns. Used by the layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

pad_radial

Pad text labels away from the scale ticks/remainder of the LV_PART_

• Default 0
• Inherited No
• Layout No
• Ext. draw No

Margin

Properties to describe spacing around a Widget. Very similar to the margin properties in HTML.

margin_top

Sets margin on the top. Widget will keep this space from its siblings in layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

margin_bottom

Sets margin on the bottom. Widget will keep this space from its siblings in layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

margin_left

Sets margin on the left. Widget will keep this space from its siblings in layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

margin_right

Sets margin on the right. Widget will keep this space from its siblings in layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

Background

Properties to describe the background color and image of Widget.

bg_color

Set background color of Widget.

• Default `0xffffff`
• Inherited No
• Layout No
• Ext. draw No

bg_opa

Set opacity of the background. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_TRANSP`
• Inherited No
• Layout No
• Ext. draw No

bg_grad_color

Set gradient color of the background. Used only if grad_dir is not LV_GRAD_DIR_NONE

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

bg_grad_dir

Set direction of the gradient of the background. Possible values are LV_GRAD_DIR_NONE/HOR/VER.

• Default `LV_GRAD_DIR_NONE`
• Inherited No
• Layout No
• Ext. draw No

bg_main_stop

Set point from which background color should start for gradients. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on

• Default 0
• Inherited No
• Layout No
• Ext. draw No

bg_grad_stop

Set point from which background's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on

• Default 255
• Inherited No
• Layout No
• Ext. draw No

bg_main_opa

Set opacity of the first gradient color

• Default 255
• Inherited No
• Layout No
• Ext. draw No

bg_grad_opa

Set opacity of the second gradient color

• Default 255
• Inherited No
• Layout No
• Ext. draw No

bg_grad

Set gradient definition. The pointed instance must exist while Widget is alive. NULL to disable. It wraps BG_GRAD_COLOR, BG_GRAD_DIR, BG_MAIN_STOP and BG_GRAD_STOP into one descriptor and allows creating gradients with more colors as well. If it's set other gradient related properties will be ignored'

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw No

bg_image_src

Set a background image. Can be a pointer to lv_image_dsc_t, a path to a file or an LV_SYMBOL_...

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw Yes

bg_image_opa

Set opacity of the background image. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw No

bg_image_recolor

Set a color to mix to the background image.

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

bg_image_recolor_opa

Set intensity of background image recoloring. Value 0, LV_OPA_0 or LV_OPA_TRANSP means no mixing, 255, LV_OPA_100 or LV_OPA_COVER means full recoloring, other values or LV_OPA_10, LV_OPA_20, etc are interpreted proportionally.

• Default `LV_OPA_TRANSP`
• Inherited No
• Layout No
• Ext. draw No

bg_image_tiled

If enabled the background image will be tiled. Possible values are true or false.

• Default 0
• Inherited No
• Layout No
• Ext. draw No

Border

Properties to describe the borders

border_color

Set color of the border

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

border_opa

Set opacity of the border. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw No

border_width

Set width of the border. Only pixel values can be used.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

border_side

Set only which side(s) the border should be drawn. Possible values are LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL. OR-ed values can be used as well, e.g. LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT.

• Default `LV_BORDER_SIDE_NONE`
• Inherited No
• Layout No
• Ext. draw No

border_post

Sets whether the border should be drawn before or after the children are drawn. true: after children, false: before children

• Default 0
• Inherited No
• Layout No
• Ext. draw No

Outline

Properties to describe the outline. It's like a border but drawn outside of the rectangles.

outline_width

Set width of outline in pixels.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

outline_color

Set color of outline.

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

outline_opa

Set opacity of outline. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw Yes

outline_pad

Set padding of outline, i.e. the gap between Widget and the outline.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

Shadow

Properties to describe the shadow drawn under the rectangles.

shadow_width

Set width of the shadow in pixels. The value should be >= 0.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

shadow_offset_x

Set an offset on the shadow in pixels in X direction.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

shadow_offset_y

Set an offset on the shadow in pixels in Y direction.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

shadow_spread

Make shadow calculation to use a larger or smaller rectangle as base. The value can be in pixels to make the area larger/smaller

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

shadow_color

Set color of shadow

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

shadow_opa

Set opacity of shadow. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw Yes

Image

Properties to describe the images

image_opa

Set opacity of an image. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw No

image_recolor

Set color to mix with the image.

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

image_recolor_opa

Set intensity of color mixing. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default 0
• Inherited No
• Layout No
• Ext. draw No

Line

Properties to describe line-like Widgets

line_width

Set width of lines in pixels.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

line_dash_width

Set width of dashes in pixels. Note that dash works only on horizontal and vertical lines

• Default 0
• Inherited No
• Layout No
• Ext. draw No

line_dash_gap

Set gap between dashes in pixels. Note that dash works only on horizontal and vertical lines

• Default 0
• Inherited No
• Layout No
• Ext. draw No

line_rounded

Make end points of the lines rounded. true: rounded, false: perpendicular line ending

• Default 0
• Inherited No
• Layout No
• Ext. draw No

line_color

Set color of lines.

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

line_opa

Set opacity of lines.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw No

Arc

TODO

arc_width

Set width (thickness) of arcs in pixels.

• Default 0
• Inherited No
• Layout No
• Ext. draw Yes

arc_rounded

Make end points of arcs rounded. true: rounded, false: perpendicular line ending

• Default 0
• Inherited No
• Layout No
• Ext. draw No

arc_color

Set color of arc.

• Default `0x000000`
• Inherited No
• Layout No
• Ext. draw No

arc_opa

Set opacity of arcs.

• Default `LV_OPA_COVER`
• Inherited No
• Layout No
• Ext. draw No

arc_image_src

Set an image from which arc will be masked out. It's useful to display complex effects on the arcs. Can be a pointer to lv_image_dsc_t or a path to a file

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw No

Text

Properties to describe the properties of text. All these properties are inherited.

text_color

Sets color of text.

• Default `0x000000`
• Inherited Yes
• Layout No
• Ext. draw No

text_opa

Set opacity of text. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited Yes
• Layout No
• Ext. draw No

text_font

Set font of text (a pointer lv_font_t *).

• Default `LV_FONT_DEFAULT`
• Inherited Yes
• Layout Yes
• Ext. draw No

text_letter_space

Set letter space in pixels

• Default 0
• Inherited Yes
• Layout Yes
• Ext. draw No

text_line_space

Set line space in pixels.

• Default 0
• Inherited Yes
• Layout Yes
• Ext. draw No

text_decor

Set decoration for the text. Possible values are LV_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH. OR-ed values can be used as well.

• Default `LV_TEXT_DECOR_NONE`
• Inherited Yes
• Layout No
• Ext. draw No

text_align

Set how to align the lines of the text. Note that it doesn't align the Widget itself, only the lines inside the Widget. Possible values are LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO. LV_TEXT_ALIGN_AUTO detect the text base direction and uses left or right alignment accordingly

• Default `LV_TEXT_ALIGN_AUTO`
• Inherited Yes
• Layout Yes
• Ext. draw No

Miscellaneous

Mixed properties for various purposes.

radius

Set radius on every corner. The value is interpreted in pixels (>= 0) or LV_RADIUS_CIRCLE for max. radius

• Default 0
• Inherited No
• Layout No
• Ext. draw No

radial_offset

Move start point of object (e.g. scale tick) radially

• Default 0
• Inherited No
• Layout No
• Ext. draw No

clip_corner

Enable to clip the overflowed content on the rounded corner. Can be true or false.

• Default 0
• Inherited No
• Layout No
• Ext. draw No

opa

Scale down all opacity values of the Widget by this factor. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited Yes
• Layout No
• Ext. draw No

opa_layered

First draw Widget on the layer, then scale down layer opacity factor. Value 0, LV_OPA_0 or LV_OPA_TRANSP means fully transparent, 255, LV_OPA_100 or LV_OPA_COVER means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.

• Default `LV_OPA_COVER`
• Inherited Yes
• Layout No
• Ext. draw No

color_filter_dsc

Mix a color with all colors of the Widget.

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw No

color_filter_opa

The intensity of mixing of color filter.

• Default `LV_OPA_TRANSP`
• Inherited No
• Layout No
• Ext. draw No

anim

Animation template for Widget's animation. Should be a pointer to lv_anim_t. The animation parameters are widget specific, e.g. animation time could be the E.g. blink time of the cursor on the Text Area or scroll time of a roller. See Widgets' documentation to learn more.

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw No

anim_duration

Animation duration in milliseconds. Its meaning is widget specific. E.g. blink time of the cursor on the Text Area or scroll time of a roller. See Widgets' documentation to learn more.

• Default 0
• Inherited No
• Layout No
• Ext. draw No

transition

An initialized lv_style_transition_dsc_t to describe a transition.

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw No

blend_mode

Describes how to blend the colors to the background. Possible values are LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE/MULTIPLY

• Default `LV_BLEND_MODE_NORMAL`
• Inherited No
• Layout No
• Ext. draw No

layout

Set layout of Widget. Children will be repositioned and resized according to policies set for the layout. For possible values see documentation of the layouts.

• Default 0
• Inherited No
• Layout Yes
• Ext. draw No

base_dir

Set base direction of Widget. Possible values are LV_BIDI_DIR_LTR/RTL/AUTO.

• Default `LV_BASE_DIR_AUTO`
• Inherited Yes
• Layout Yes
• Ext. draw No

bitmap_mask_src

If set, a layer will be created for the widget and the layer will be masked with this A8 bitmap mask.

• Default `NULL`
• Inherited No
• Layout No
• Ext. draw No

rotary_sensitivity

Adjust sensitivity for rotary encoders in 1/256 unit. It means, 128: slow down the rotary to half, 512: speeds up to double, 256: no change

• Default `256`
• Inherited Yes
• Layout No
• Ext. draw No

Flex

Flex layout properties.

flex_flow

Defines in which direct the flex layout should arrange the children

• Default `LV_FLEX_FLOW_NONE`
• Inherited No
• Layout Yes
• Ext. draw No

flex_main_place

Defines how to align the children in the direction of flex flow

• Default `LV_FLEX_ALIGN_NONE`
• Inherited No
• Layout Yes
• Ext. draw No

flex_cross_place

Defines how to align the children perpendicular to the direction of flex flow

• Default `LV_FLEX_ALIGN_NONE`
• Inherited No
• Layout Yes
• Ext. draw No

flex_track_place

Defines how to align the tracks of the flow

• Default `LV_FLEX_ALIGN_NONE`
• Inherited No
• Layout Yes
• Ext. draw No

flex_grow

Defines how much space to take proportionally from the free space of the Widget's track

• Default `LV_FLEX_ALIGN_ROW`
• Inherited No
• Layout Yes
• Ext. draw No

Grid

Grid layout properties.

grid_column_dsc_array

An array to describe the columns of the grid. Should be LV_GRID_TEMPLATE_LAST terminated

• Default `NULL`
• Inherited No
• Layout Yes
• Ext. draw No

grid_column_align

Defines how to distribute the columns

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_row_dsc_array

An array to describe the rows of the grid. Should be LV_GRID_TEMPLATE_LAST terminated

• Default `NULL`
• Inherited No
• Layout Yes
• Ext. draw No

grid_row_align

Defines how to distribute the rows.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_cell_column_pos

Set column in which Widget should be placed.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_cell_x_align

Set how to align Widget horizontally.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_cell_column_span

Set how many columns Widget should span. Needs to be >= 1.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_cell_row_pos

Set row in which Widget should be placed.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_cell_y_align

Set how to align Widget vertically.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No

grid_cell_row_span

Set how many rows Widget should span. Needs to be >= 1.

• Default `LV_GRID_ALIGN_START`
• Inherited No
• Layout Yes
• Ext. draw No