docs example list fixes

This commit is contained in:
Gabor Kiss-Vamosi
2021-06-15 10:47:09 +02:00
parent c49e830aad
commit cd600d1056
2 changed files with 113 additions and 114 deletions

View File

@@ -1,7 +1,5 @@
import os import os
path ="../examples/"
def process_index_rst(path): def process_index_rst(path):
# print(path) # print(path)
with open(path) as fp: with open(path) as fp:
@@ -71,9 +69,8 @@ layouts = {
"grid":"Grid", "grid":"Grid",
} }
fout = open("examples.md", "w")
def print_item(path, lvl, d): def print_item(path, lvl, d, fout):
for k in d: for k in d:
v = d[k] v = d[k]
b = os.path.basename(k) b = os.path.basename(k)
@@ -83,8 +80,10 @@ def print_item(path, lvl, d):
fout.write("\n") fout.write("\n")
def exec(): def exec():
path ="../examples/"
fout = open("examples.md", "w")
filelist = [] filelist = []
for root, dirs, files in os.walk(path): for root, dirs, files in os.walk(path):
for f in files: for f in files:
#append the file name to the list #append the file name to the list
@@ -111,13 +110,13 @@ def exec():
if h == "widgets": if h == "widgets":
for w in widgets: for w in widgets:
fout.write("### " + widgets[w] + "\n") fout.write("### " + widgets[w] + "\n")
print_item(h + "/" + w, 4, d_all) print_item(h + "/" + w, 4, d_all, fout)
elif h == "layouts": elif h == "layouts":
for l in layouts: for l in layouts:
fout.write("### " + layouts[l] + "\n") fout.write("### " + layouts[l] + "\n")
print_item(h + "/" + l, 4, d_all) print_item(h + "/" + l, 4, d_all, fout)
else: else:
print_item(h, 3, d_all) print_item(h, 3, d_all, fout)
fout.write("") fout.write("")

View File

@@ -6,359 +6,359 @@
# Examples # Examples
## Get started ## Get started
### A button with a label and react on click event ### A button with a label and react on click event
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_1&amp;w=320&amp;h=240"></iframe>
### Create styles from scratch for buttons ### Create styles from scratch for buttons
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_2&amp;w=320&amp;h=240"></iframe>
### Create a slider and write its value on a label ### Create a slider and write its value on a label
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_3&amp;w=320&amp;h=240"></iframe>
## Styles ## Styles
### Size styles ### Size styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&amp;w=320&amp;h=240"></iframe>
### Background styles ### Background styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&amp;w=320&amp;h=240"></iframe>
### Border styles ### Border styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&amp;w=320&amp;h=240"></iframe>
### Outline styles ### Outline styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&amp;w=320&amp;h=240"></iframe>
### Shadow styles ### Shadow styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&amp;w=320&amp;h=240"></iframe>
### Image styles ### Image styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&amp;w=320&amp;h=240"></iframe>
### Text styles ### Text styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&amp;w=320&amp;h=240"></iframe>
### Line styles ### Line styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&amp;w=320&amp;h=240"></iframe>
### Transition ### Transition
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&amp;w=320&amp;h=240"></iframe>
### Using multiple styles ### Using multiple styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&amp;w=320&amp;h=240"></iframe>
### Local styles ### Local styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&amp;w=320&amp;h=240"></iframe>
### Add styles to parts and states ### Add styles to parts and states
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_13&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_13&amp;w=320&amp;h=240"></iframe>
### Extending the current theme ### Extending the current theme
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&amp;w=320&amp;h=240"></iframe>
## Animations ## Animations
### Start animation on an event ### Start animation on an event
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_1&amp;w=320&amp;h=240"></iframe>
### Playback animation ### Playback animation
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&amp;w=320&amp;h=240"></iframe>
## Events ## Events
### Button click event ### Button click event
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&amp;w=320&amp;h=240"></iframe>
### Handle multiple events ### Handle multiple events
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&amp;w=320&amp;h=240"></iframe>
### Event bubbling ### Event bubbling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&amp;w=320&amp;h=240"></iframe>
## Layouts ## Layouts
### Flex ### Flex
#### A simple row and a column layout with flexbox #### A simple row and a column layout with flexbox
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_1&amp;w=320&amp;h=240"></iframe>
#### Arrange items in rows with wrap and even spacing #### Arrange items in rows with wrap and even spacing
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_2&amp;w=320&amp;h=240"></iframe>
#### Demonstrate flex grow #### Demonstrate flex grow
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&amp;w=320&amp;h=240"></iframe>
#### Demonstrate flex grow. #### Demonstrate flex grow.
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&amp;w=320&amp;h=240"></iframe>
#### Demonstrate column and row gap style properties #### Demonstrate column and row gap style properties
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_5&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_5&amp;w=320&amp;h=240"></iframe>
#### RTL base direction changes order of the items #### RTL base direction changes order of the items
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_6&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_6&amp;w=320&amp;h=240"></iframe>
### Grid ### Grid
#### A simple grid #### A simple grid
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_1&amp;w=320&amp;h=240"></iframe>
#### Demonstrate cell placement and span #### Demonstrate cell placement and span
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_2&amp;w=320&amp;h=240"></iframe>
#### Demonstrate grid's "free unit" #### Demonstrate grid's "free unit"
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&amp;w=320&amp;h=240"></iframe>
#### Demonstrate track placement #### Demonstrate track placement
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&amp;w=320&amp;h=240"></iframe>
#### Demonstrate column and row gap #### Demonstrate column and row gap
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_5&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_5&amp;w=320&amp;h=240"></iframe>
#### Demonstrate RTL direction on grid #### Demonstrate RTL direction on grid
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&amp;w=320&amp;h=240"></iframe>
## Scrolling ## Scrolling
### Nested scrolling ### Nested scrolling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&amp;w=320&amp;h=240"></iframe>
### Snapping ### Snapping
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&amp;w=320&amp;h=240"></iframe>
### Floating button ### Floating button
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&amp;w=320&amp;h=240"></iframe>
### Styling the scrollbars ### Styling the scrollbars
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&amp;w=320&amp;h=240"></iframe>
### Right to left scrolling ### Right to left scrolling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&amp;w=320&amp;h=240"></iframe>
### Translate on scroll ### Translate on scroll
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&amp;w=320&amp;h=240"></iframe>
## Widgets ## Widgets
### Base object ### Base object
#### Base objects with custom styles #### Base objects with custom styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_1&amp;w=320&amp;h=240"></iframe>
#### Make an object draggable #### Make an object draggable
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&amp;w=320&amp;h=240"></iframe>
### Arc ### Arc
#### Simple Arc #### Simple Arc
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&amp;w=320&amp;h=240"></iframe>
#### Loader with Arc #### Loader with Arc
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&amp;w=320&amp;h=240"></iframe>
### Bar ### Bar
#### Simple Bar #### Simple Bar
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&amp;w=320&amp;h=240"></iframe>
#### Styling a bar #### Styling a bar
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&amp;w=320&amp;h=240"></iframe>
#### Temperature meter #### Temperature meter
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&amp;w=320&amp;h=240"></iframe>
#### Stripe pattern and range value #### Stripe pattern and range value
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_4&amp;w=320&amp;h=240"></iframe>
#### Bar with RTL and RTL base direction #### Bar with RTL and RTL base direction
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_5&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_5&amp;w=320&amp;h=240"></iframe>
#### Custom drawr to show the current value #### Custom drawr to show the current value
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_6&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_6&amp;w=320&amp;h=240"></iframe>
### Button ### Button
#### Simple Buttons #### Simple Buttons
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&amp;w=320&amp;h=240"></iframe>
#### Styling buttons #### Styling buttons
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&amp;w=320&amp;h=240"></iframe>
#### Gummy button #### Gummy button
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&amp;w=320&amp;h=240"></iframe>
### Button matrix ### Button matrix
#### Simple Button matrix #### Simple Button matrix
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&amp;w=320&amp;h=240"></iframe>
#### Custom buttons #### Custom buttons
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&amp;w=320&amp;h=240"></iframe>
#### Pagination #### Pagination
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&amp;w=320&amp;h=240"></iframe>
### Calendar ### Calendar
#### Calendar with header #### Calendar with header
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&amp;w=320&amp;h=240"></iframe>
### Canvas ### Canvas
#### Drawing on the Canvas and rotate #### Drawing on the Canvas and rotate
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_1&amp;w=320&amp;h=240"></iframe>
#### Transparent Canvas with chroma keying #### Transparent Canvas with chroma keying
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&amp;w=320&amp;h=240"></iframe>
### Chart ### Chart
#### Line Chart #### Line Chart
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&amp;w=320&amp;h=240"></iframe>
#### Faded area line chart with custom division lines #### Faded area line chart with custom division lines
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_2&amp;w=320&amp;h=240"></iframe>
#### Axis ticks and labels with scrolling #### Axis ticks and labels with scrolling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_3&amp;w=320&amp;h=240"></iframe>
#### Show the value of the pressed points #### Show the value of the pressed points
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_4&amp;w=320&amp;h=240"></iframe>
#### Display 1000 data points with zooming and scrolling #### Display 1000 data points with zooming and scrolling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_5&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_5&amp;w=320&amp;h=240"></iframe>
#### Show cursor on the clicked point #### Show cursor on the clicked point
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_6&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_6&amp;w=320&amp;h=240"></iframe>
#### Scatter chart #### Scatter chart
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&amp;w=320&amp;h=240"></iframe>
### Checkbox ### Checkbox
#### Simple Checkboxes #### Simple Checkboxes
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&amp;w=320&amp;h=240"></iframe>
### Colorwheel ### Colorwheel
#### Simple Colorwheel #### Simple Colorwheel
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&amp;w=320&amp;h=240"></iframe>
### Dropdown ### Dropdown
#### Simple Drop down list #### Simple Drop down list
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_1&amp;w=320&amp;h=240"></iframe>
#### Drop down in four directions #### Drop down in four directions
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&amp;w=320&amp;h=240"></iframe>
#### Menu #### Menu
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&amp;w=320&amp;h=240"></iframe>
### Image ### Image
#### Image from variable and symbol #### Image from variable and symbol
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_img_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_1&amp;w=320&amp;h=240"></iframe>
#### Image recoloring #### Image recoloring
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&amp;w=320&amp;h=240"></iframe>
#### Rotate and zoom #### Rotate and zoom
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&amp;w=320&amp;h=240"></iframe>
#### Image offset and styling #### Image offset and styling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&amp;w=320&amp;h=240"></iframe>
### Image button ### Image button
#### Simple Image button #### Simple Image button
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&amp;w=320&amp;h=240"></iframe>
### Keyboard ### Keyboard
#### Keyboard with text area #### Keyboard with text area
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&amp;w=320&amp;h=240"></iframe>
### Label ### Label
#### Line wrap, recoloring and scrolling #### Line wrap, recoloring and scrolling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_label_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_1&amp;w=320&amp;h=240"></iframe>
#### Text shadow #### Text shadow
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&amp;w=320&amp;h=240"></iframe>
#### Show LTR, RTL and Chinese texts #### Show LTR, RTL and Chinese texts
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_label_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_3&amp;w=320&amp;h=240"></iframe>
### LED ### LED
#### LED with custom style #### LED with custom style
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&amp;w=320&amp;h=240"></iframe>
### Line ### Line
#### Simple Line #### Simple Line
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&amp;w=320&amp;h=240"></iframe>
### List ### List
#### Simple List #### Simple List
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&amp;w=320&amp;h=240"></iframe>
### Meter ### Meter
#### Simple meter #### Simple meter
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&amp;w=320&amp;h=240"></iframe>
#### A meter with multiple arcs #### A meter with multiple arcs
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_2&amp;w=320&amp;h=240"></iframe>
#### A clock from a meter #### A clock from a meter
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&amp;w=320&amp;h=240"></iframe>
#### Pie chart #### Pie chart
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&amp;w=320&amp;h=240"></iframe>
### Message box ### Message box
#### Simple Message box #### Simple Message box
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&amp;w=320&amp;h=240"></iframe>
### Roller ### Roller
#### Simple Roller #### Simple Roller
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&amp;w=320&amp;h=240"></iframe>
#### Styling the roller #### Styling the roller
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&amp;w=320&amp;h=240"></iframe>
#### add fade mask to roller #### add fade mask to roller
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&amp;w=320&amp;h=240"></iframe>
### Slider ### Slider
#### Simple Slider #### Simple Slider
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&amp;w=320&amp;h=240"></iframe>
#### Slider with custom style #### Slider with custom style
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_2&amp;w=320&amp;h=240"></iframe>
#### Slider with extended drawer #### Slider with extended drawer
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&amp;w=320&amp;h=240"></iframe>
### Span ### Span
#### Span with custom styles #### Span with custom styles
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&amp;w=320&amp;h=240"></iframe>
### Spinbox ### Spinbox
#### Simple Spinbox #### Simple Spinbox
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&amp;w=320&amp;h=240"></iframe>
### Spinner ### Spinner
#### Simple spinner #### Simple spinner
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&amp;w=320&amp;h=240"></iframe>
### Switch ### Switch
#### Simple Switch #### Simple Switch
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&amp;w=320&amp;h=240"></iframe>
### Table ### Table
#### Simple table #### Simple table
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&amp;w=320&amp;h=240"></iframe>
#### Lightweighted list from table #### Lightweighted list from table
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&amp;w=320&amp;h=240"></iframe>
### Tabview ### Tabview
#### Simple Tabview #### Simple Tabview
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&amp;w=320&amp;h=240"></iframe>
#### Tabs on the left, styling and no scrolling #### Tabs on the left, styling and no scrolling
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_2&amp;w=320&amp;h=240"></iframe>
### Textarea ### Textarea
#### Simple Text area #### Simple Text area
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_1&amp;w=320&amp;h=240"></iframe>
#### Text area with password field #### Text area with password field
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&amp;w=320&amp;h=240"></iframe>
#### Text auto-formatting #### Text auto-formatting
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&amp;w=320&amp;h=240"></iframe>
### Tabview ### Tabview
#### Tileview with content #### Tileview with content
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&amp;w=320&amp;h=240"></iframe>
### Window ### Window
#### Simple window #### Simple window
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&amp;w=320&amp;h=240"></iframe> <iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&amp;w=320&amp;h=240"></iframe>