Styles
Overview
In XML files, both style sheets (lv_style_t) and local styles can be used.
Style variants are also supported to change style properties at runtime.
Style Sheets
In the <styles>
section, styles and their properties can be defined like this:
<style name="red"
help="What is this style about?"
border_width="2px"
border_color="0xff0000"/>
Styles can be referenced like this in the <view>
:
<view>
<slider styles="main red:indicator red:knob:focused"/>
</view>
As shown in the example, parts and states are appended after a :
to the style's name.
Local Styles
Local styles can be used directly in a Widget, for example:
<lv_label style_bg_opa="200" style_bg_opa:disabled="100"/>
Gradients
Before the <styles>
tag, the <gradients>
tag can be used to describe various
gradients, which can later be referenced in styles.
When a gradient is created, it can be referenced by its name, like:
<style bg_grad="grad1"/>
or
<lv_button style_bg_grad="grad1"/>
Horizontal or Vertical Gradient
To define a simple <horizontal>
or <vertical>
gradients:
<gradients>
<horizontal name="grad1">
<stop color="#ff0000" offset="20%" opa="40%"/>
<stop color="#00ff00" offset="128" opa="100%"/>
</horizontal>
</gradients>
Linear Gradient
To define a skewed gradient from two points:
<gradients>
<linear name="grad1" start="50 50" end="100 80">
<stop color="#ff0000" offset="20%" opa="100%"/>
<stop color="#00ff00" offset="240" opa="100%"/>
</linear>
</gradients>
Radial Gradient
To define a radial gradient:
<gradients>
<radial name="grad1" center="100 50%" edge="200 50" focal_center="50 80%" focal_edge="55 80%">
<stop color="#ff0000" opa="100%"/>
<stop color="#00ff00" opa="100%"/>
</radial>
</gradients>
Conical Gradient
To define a conical gradient:
<gradients>
<conical name="grad1" center="80 50%" angle="45 270">
<stop color="#ff0000" opa="100%"/>
<stop color="#00ff00" opa="100%"/>
</conical>
</gradients>