🧩 Component Library¶

The component library provides a rich collection of LVGL UI components, divided into system components and custom components.

2.1 System Component Library¶

Component Categories¶

Layout Containers - Container - Basic container for organizing other components - Window - Window container

Buttons - Button - Standard button - Image Button - Image button with multi-state image support - Button Matrix - Button matrix, similar to keyboard layout

Form Input - Text Area - Multi-line text input box - Checkbox - Checkbox - Switch - Toggle switch - Slider - Slider - Dropdown - Dropdown selection box - Roller - Roller picker - Spinbox - Number adjustment box (with increment/decrement buttons)

Data Display - Label - Text label - Span Group - Rich text with multi-style text segments - Table - Table - List - List

Image Media - Image - Image display

Visualization - Arc - Arc/progress ring - Line - Line chart - QR Code - QR code - Barcode - Barcode - LED - LED indicator

Feedback - Progress Bar - Progress bar - Spinner - Loading animation - Message Box - Message box

Navigation - Tab View - Tab view (in development) - Tile View - Tile view (in development)

Advanced Components - Digital Clock - Digital clock - Calendar - Calendar - Keyboard - Virtual keyboard - Scale - Scale/gauge

2.2 Component Library Functions¶

Search Components - Input box at top of component library: Enter component name for quick search

Component Preview - Hover mouse over component to view component type - Each component has a corresponding icon preview

Drag and Add 1. Find target component in component library 2. Hold left mouse button and drag component 3. Drag to target position in canvas 4. Release mouse to complete addition

2.3 Custom Component Library¶

Create Custom Component¶

Save commonly used component combinations as templates for reuse:

Design component combination in canvas (e.g., button with icon)
Select component in component tree
Right-click and select "Create Custom Component"
Enter component name and description
Click save

Use Custom Component¶

Switch to "Custom Components" tab in component library
Find the saved custom component
Drag to canvas to use
Custom component retains all properties and styles

Manage Custom Components¶

Delete: Select "Delete" on custom component