mirror of
https://github.com/lvgl/lvgl.git
synced 2025-02-04 07:13:00 +08:00
365 lines
17 KiB
Markdown
365 lines
17 KiB
Markdown
```eval_rst
|
|
.. include:: /header.rst
|
|
:github_url: |github_link_base|/examples.md
|
|
```
|
|
|
|
# Examples
|
|
## Get started
|
|
### A button with a label and react on click event
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_get_started_3&w=320&h=240"></iframe>
|
|
|
|
## Styles
|
|
### Size styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_1&w=320&h=240"></iframe>
|
|
|
|
### Background styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_2&w=320&h=240"></iframe>
|
|
|
|
### Border styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_3&w=320&h=240"></iframe>
|
|
|
|
### Outline styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_4&w=320&h=240"></iframe>
|
|
|
|
### Shadow styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_5&w=320&h=240"></iframe>
|
|
|
|
### Image styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_6&w=320&h=240"></iframe>
|
|
|
|
### Text styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_8&w=320&h=240"></iframe>
|
|
|
|
### Line styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_9&w=320&h=240"></iframe>
|
|
|
|
### Transition
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_10&w=320&h=240"></iframe>
|
|
|
|
### Using multiple styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_11&w=320&h=240"></iframe>
|
|
|
|
### Local styles
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_style_14&w=320&h=240"></iframe>
|
|
|
|
## Animations
|
|
### Start animation on an event
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_1&w=320&h=240"></iframe>
|
|
|
|
### Playback animation
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_anim_2&w=320&h=240"></iframe>
|
|
|
|
## Events
|
|
### Button click event
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_1&w=320&h=240"></iframe>
|
|
|
|
### Handle multiple events
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_2&w=320&h=240"></iframe>
|
|
|
|
### Event bubbling
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_event_3&w=320&h=240"></iframe>
|
|
|
|
## Layouts
|
|
### Flex
|
|
#### A simple row and a column layout with flexbox
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_2&w=320&h=240"></iframe>
|
|
|
|
#### Demonstrate flex grow
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_3&w=320&h=240"></iframe>
|
|
|
|
#### Demonstrate flex grow.
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_flex_6&w=320&h=240"></iframe>
|
|
|
|
### Grid
|
|
#### A simple grid
|
|
<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
|
|
<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"
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_3&w=320&h=240"></iframe>
|
|
|
|
#### Demonstrate track placement
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_grid_6&w=320&h=240"></iframe>
|
|
|
|
## Scrolling
|
|
### Nested scrolling
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_1&w=320&h=240"></iframe>
|
|
|
|
### Snapping
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_2&w=320&h=240"></iframe>
|
|
|
|
### Floating button
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_3&w=320&h=240"></iframe>
|
|
|
|
### Styling the scrollbars
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_5&w=320&h=240"></iframe>
|
|
|
|
### Translate on scroll
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_scroll_6&w=320&h=240"></iframe>
|
|
|
|
## Widgets
|
|
### Base object
|
|
#### Base objects with custom styles
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_obj_2&w=320&h=240"></iframe>
|
|
|
|
### Arc
|
|
#### Simple Arc
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_1&w=320&h=240"></iframe>
|
|
|
|
#### Loader with Arc
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_arc_2&w=320&h=240"></iframe>
|
|
|
|
### Bar
|
|
#### Simple Bar
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_1&w=320&h=240"></iframe>
|
|
|
|
#### Styling a bar
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_2&w=320&h=240"></iframe>
|
|
|
|
#### Temperature meter
|
|
<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
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_bar_6&w=320&h=240"></iframe>
|
|
|
|
### Button
|
|
#### Simple Buttons
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_1&w=320&h=240"></iframe>
|
|
|
|
#### Styling buttons
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_2&w=320&h=240"></iframe>
|
|
|
|
#### Gummy button
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btn_3&w=320&h=240"></iframe>
|
|
|
|
### Button matrix
|
|
#### Simple Button matrix
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_1&w=320&h=240"></iframe>
|
|
|
|
#### Custom buttons
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_2&w=320&h=240"></iframe>
|
|
|
|
#### Pagination
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_btnmatrix_3&w=320&h=240"></iframe>
|
|
|
|
### Calendar
|
|
#### Calendar with header
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_calendar_1&w=320&h=240"></iframe>
|
|
|
|
### Canvas
|
|
#### Drawing on the Canvas and rotate
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_canvas_2&w=320&h=240"></iframe>
|
|
|
|
### Chart
|
|
#### Line Chart
|
|
<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
|
|
<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
|
|
<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
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_6&w=320&h=240"></iframe>
|
|
|
|
#### Scatter chart
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_chart_7&w=320&h=240"></iframe>
|
|
|
|
### Checkbox
|
|
#### Simple Checkboxes
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_checkbox_1&w=320&h=240"></iframe>
|
|
|
|
### Colorwheel
|
|
#### Simple Colorwheel
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_colorwheel_1&w=320&h=240"></iframe>
|
|
|
|
### Dropdown
|
|
#### Simple Drop down list
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_2&w=320&h=240"></iframe>
|
|
|
|
#### Menu
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_dropdown_3&w=320&h=240"></iframe>
|
|
|
|
### Image
|
|
#### Image from variable and symbol
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_1&w=320&h=240"></iframe>
|
|
|
|
#### Image recoloring
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_2&w=320&h=240"></iframe>
|
|
|
|
#### Rotate and zoom
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_img_4&w=320&h=240"></iframe>
|
|
|
|
### Image button
|
|
#### Simple Image button
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_imgbtn_1&w=320&h=240"></iframe>
|
|
|
|
### Keyboard
|
|
#### Keyboard with text area
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_keyboard_1&w=320&h=240"></iframe>
|
|
|
|
### Label
|
|
#### Line wrap, recoloring and scrolling
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_1&w=320&h=240"></iframe>
|
|
|
|
#### Text shadow
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_label_3&w=320&h=240"></iframe>
|
|
|
|
### LED
|
|
#### LED with custom style
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_led_1&w=320&h=240"></iframe>
|
|
|
|
### Line
|
|
#### Simple Line
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_line_1&w=320&h=240"></iframe>
|
|
|
|
### List
|
|
#### Simple List
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_list_1&w=320&h=240"></iframe>
|
|
|
|
### Meter
|
|
#### Simple meter
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_3&w=320&h=240"></iframe>
|
|
|
|
#### Pie chart
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_meter_4&w=320&h=240"></iframe>
|
|
|
|
### Message box
|
|
#### Simple Message box
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_msgbox_1&w=320&h=240"></iframe>
|
|
|
|
### Roller
|
|
#### Simple Roller
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_1&w=320&h=240"></iframe>
|
|
|
|
#### Styling the roller
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_roller_3&w=320&h=240"></iframe>
|
|
|
|
### Slider
|
|
#### Simple Slider
|
|
<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
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_slider_3&w=320&h=240"></iframe>
|
|
|
|
### Span
|
|
#### Span with custom styles
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_span_1&w=320&h=240"></iframe>
|
|
|
|
### Spinbox
|
|
#### Simple Spinbox
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinbox_1&w=320&h=240"></iframe>
|
|
|
|
### Spinner
|
|
#### Simple spinner
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_spinner_1&w=320&h=240"></iframe>
|
|
|
|
### Switch
|
|
#### Simple Switch
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_switch_1&w=320&h=240"></iframe>
|
|
|
|
### Table
|
|
#### Simple table
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_table_2&w=320&h=240"></iframe>
|
|
|
|
### Tabview
|
|
#### Simple Tabview
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tabview_2&w=320&h=240"></iframe>
|
|
|
|
### Textarea
|
|
#### Simple Text area
|
|
<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
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_2&w=320&h=240"></iframe>
|
|
|
|
#### Text auto-formatting
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_textarea_3&w=320&h=240"></iframe>
|
|
|
|
### Tabview
|
|
#### Tileview with content
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_tileview_1&w=320&h=240"></iframe>
|
|
|
|
### Window
|
|
#### Simple window
|
|
<iframe loading="lazy" class="lv-example" src="_static/built_lv_examples?example=lv_example_win_1&w=320&h=240"></iframe>
|
|
|