Workspace User Guide

The workspace is the core working area of BEKEN LVGL UI Designer. This guide provides detailed information about the functions and usage of each module in the workspace.

📐 Workspace Layout

The workspace is divided into 5 main functional areas:

UI Designer Interface

Five Main Areas

  1. Canvas Area - Core area for visual design
  2. Component Library - Rich UI component library
  3. Component Tree - Component hierarchy management
  4. Properties Panel - Property and style editing
  5. Event System - Component interaction event configuration
  6. Multi-language Feature - Multi-language configuration and usage
  7. Custom Characters - Custom character configuration and management
  8. Toolbar - Project management and common functions

Keyboard Shortcuts

For a complete list of keyboard shortcuts, please refer to the Shortcuts documentation.

📚 Detailed Documentation

Click the links below to view detailed instructions for each module:

Core Function Modules

  • 🎨 Canvas Area
  • View control (zoom, pan, grid)
  • Rulers and guidelines
  • Component operations (add, select, move, resize)

  • Component alignment, layering, locking and hiding

  • 🧩 Component Library

  • System component library (30+ components)
  • Component categories and search

  • Create and use custom component library

  • 🌲 Component Tree

  • Page management (create, switch, delete, rename)
  • Component hierarchy display

  • Component operations (select, rename, drag and reorder)

  • ⚙️ Properties Panel

  • Basic property editing
  • Style editor (parts, states)

  • Style library functions

  • 🎯 Event System

  • Event editor usage
  • Event types and action types

  • Event configuration and examples

  • 🌍 Multi-language Feature

  • Enable multi-language in project settings
  • Configure languages and translations in asset manager
  • Enable translation in component properties

  • Use multi-language in event actions

  • 🔤 Custom Characters

  • Enable/disable custom characters feature
  • Configure characters and character ranges
  • FontAwesome icon support

  • Sync function to auto-generate configuration

  • 🛠️ Toolbar

  • Project information and save status
  • Edit operations (undo/redo)
  • View control
  • Resource manager
  • Preview and code generation

Other

Related Documents: Back to Home | Getting Started | FAQ