Styles ​

Styles play a crucial role in interface design as they define the appearance, colors, fonts, and other properties of controls.

For more detailed information, you can refer to this link: https://docs.lvgl.io/8.3/overview/style.html

Predefined Parts ​

States ​

Add Styles ​

Taking a button as an example, here's an example of adding a pressed state:

• Click on the "+" next to the style to select the predefined section and choose the state you want to modify.
• After confirming, a style list identical to the predefined section will be automatically added.
• You can then set the desired style properties to be modified.

​

Style Categories ​

• Text: Used to set the style of text within controls, including font, color, alignment, etc.
• Arc: Used to set the style of arc controls, including width, color, shape, etc.
• Background: Used to set the background style of controls, including color, transparency, gradients, images, etc.
• Border: Used to set the border style of controls, including color, transparency, width, etc.
• Padding: Used to set the padding of controls, which is the space between the content and the border.
• Shadow: Used to set the shadow style of controls, including color, transparency, width, spread distance, etc.

Text ​

For more detailed information, you can refer to this link: https://docs.lvgl.io/8.3/overview/font.html

The defined parts supporting text styles can be set using the following properties:

• Font: The font name used in the control. The default font is Montserrat, and the default Chinese font is MiSans.
• Font Color: The color of the text.
• Font Opacity: The opacity of the text.
• Letter Spacing: The spacing between letters.
• Line Spacing: The spacing between lines of text.
• Text Alignment (Horizontal): The horizontal alignment of the text, which can be left-aligned, center-aligned, or right-aligned.
• Text Alignment (Vertical): The vertical alignment of the text, which can be top-aligned, center-aligned, or bottom-aligned.

Examples ​

1、Setting font color and opacity

2、Setting letter spacing and line spacing

3、Setting Text Alignment

Arc ​

Arc styles can be set using the following properties:

• Arc Width: The line width of the arc.
• Arc Color: The color of the arc.
• Arc Opacity: The opacity of the arc.
• Arc Shape: The shape of the arc, which can be a circle, ellipse, or other custom shape.
• Arc Image: The background image of the arc.

Examples ​

1.Setting a solid color arc

2.Setting an image arc

Background ​

Background styles can be set using the following properties:

• Background Color: The color of the background.
• Background Opacity: The opacity of the background.
• Gradient Background: Using a gradient color as the background, multiple color stops can be defined to create a gradient effect.
• Gradient Background Direction: Specifies the direction of the gradient background, which can be horizontal, vertical, or a custom angle.
• Background Image: Using an image as the background.
• Background Image Opacity: The opacity of the background image.
• Background Image Repaint Color: Repaints the background image with a different color (currently not supported).
• Background Image Repaint Opacity: Adjusts the opacity of the background image (currently not supported).
• Corner Radius: Sets the corner radius of the background, giving it a rounded effect.

Examples ​

1.Setting background color, opacity, background image, and corner radius

2.Gradient background and gradient direction

Border ​

Border styles can be set using the following properties:

Border Color: The color of the border. Border Opacity: The opacity of the border. Border Width: The line width of the border. Show Top Border: Controls whether the top border is displayed. Show Bottom Border: Controls whether the bottom border is displayed. Show Left Border: Controls whether the left border is displayed. Show Right Border: Controls whether the right border is displayed.

Examples ​

Padding ​

For more detailed information, you can refer to this link: https://docs.lvgl.io/8.3/overview/coords.html

Padding refers to the space between the content of a control and its border. It can be set using the following properties:

• Top Padding: Controls the distance between the content and the top border.
• Right Padding: Controls the distance between the content and the right border.
• Bottom Padding: Controls the distance between the content and the bottom border.
• Left Padding: Controls the distance between the content and the left border.

Example ​

Shadow ​

Shadows can add depth and dimension to a control, making it more prominent and visually appealing in the interface.

Shadow styles can be set using the following properties:

• Shadow Color: Controls the color of the shadow.
• Shadow Opacity: Controls the opacity of the shadow.
• Shadow Width: Controls the width of the shadow.
• Shadow Spread Distance: Controls the spread distance of the shadow, which determines the blur effect of the shadow.
• Shadow Horizontal Offset: Controls the horizontal offset of the shadow.
• Shadow Vertical Offset: Controls the vertical offset of the shadow.

Example ​