docs example list fixes
This commit is contained in:
@@ -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("")
|
||||||
|
|
||||||
|
|||||||
212
docs/examples.md
212
docs/examples.md
@@ -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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
## Styles
|
## Styles
|
||||||
### Size styles
|
### Size styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Background styles
|
### Background styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Border styles
|
### Border styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Outline styles
|
### Outline styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Shadow styles
|
### Shadow styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Image styles
|
### Image styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Text styles
|
### Text styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Line styles
|
### Line styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Transition
|
### Transition
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Using multiple styles
|
### Using multiple styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Local styles
|
### Local styles
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_12&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_13&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Playback animation
|
### Playback animation
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Handle multiple events
|
### Handle multiple events
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Event bubbling
|
### Event bubbling
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Demonstrate flex grow
|
#### Demonstrate flex grow
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Demonstrate flex grow.
|
#### Demonstrate flex grow.
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_5&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_6&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Demonstrate track placement
|
#### Demonstrate track placement
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_5&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&w=320&h=240"></iframe>
|
||||||
|
|
||||||
## Scrolling
|
## Scrolling
|
||||||
### Nested scrolling
|
### Nested scrolling
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Snapping
|
### Snapping
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Floating button
|
### Floating button
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Styling the scrollbars
|
### Styling the scrollbars
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Translate on scroll
|
### Translate on scroll
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Arc
|
### Arc
|
||||||
#### Simple Arc
|
#### Simple Arc
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Loader with Arc
|
#### Loader with Arc
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Bar
|
### Bar
|
||||||
#### Simple Bar
|
#### Simple Bar
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Styling a bar
|
#### Styling a bar
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Temperature meter
|
#### Temperature meter
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_5&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_6&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Button
|
### Button
|
||||||
#### Simple Buttons
|
#### Simple Buttons
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Styling buttons
|
#### Styling buttons
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Gummy button
|
#### Gummy button
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Custom buttons
|
#### Custom buttons
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Pagination
|
#### Pagination
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Chart
|
### Chart
|
||||||
#### Line Chart
|
#### Line Chart
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_5&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_6&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Scatter chart
|
#### Scatter chart
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Checkbox
|
### Checkbox
|
||||||
#### Simple Checkboxes
|
#### Simple Checkboxes
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Colorwheel
|
### Colorwheel
|
||||||
#### Simple Colorwheel
|
#### Simple Colorwheel
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Menu
|
#### Menu
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Image recoloring
|
#### Image recoloring
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Rotate and zoom
|
#### Rotate and zoom
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Text shadow
|
#### Text shadow
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Line
|
### Line
|
||||||
#### Simple Line
|
#### Simple Line
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### List
|
### List
|
||||||
#### Simple List
|
#### Simple List
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Meter
|
### Meter
|
||||||
#### Simple meter
|
#### Simple meter
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Pie chart
|
#### Pie chart
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Roller
|
### Roller
|
||||||
#### Simple Roller
|
#### Simple Roller
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Styling the roller
|
#### Styling the roller
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Slider
|
### Slider
|
||||||
#### Simple Slider
|
#### Simple Slider
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Spinbox
|
### Spinbox
|
||||||
#### Simple Spinbox
|
#### Simple Spinbox
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Spinner
|
### Spinner
|
||||||
#### Simple spinner
|
#### Simple spinner
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Switch
|
### Switch
|
||||||
#### Simple Switch
|
#### Simple Switch
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Table
|
### Table
|
||||||
#### Simple table
|
#### Simple table
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Tabview
|
### Tabview
|
||||||
#### Simple Tabview
|
#### Simple Tabview
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_2&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_1&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&w=320&h=240"></iframe>
|
||||||
|
|
||||||
#### Text auto-formatting
|
#### Text auto-formatting
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&w=320&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&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
### Window
|
### Window
|
||||||
#### Simple window
|
#### Simple window
|
||||||
<iframe class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&w=320&h=240"></iframe>
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&w=320&h=240"></iframe>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user