Component

Components serve as the fundamental building blocks of applications developed with anyui.

To effectively utilize anyui's capabilities, understanding the following component concepts is essential for UI design and implementation.

Basic Component

Basic Components are native UI elements provided directly by LVGL. As anyui is a graphic design tool that generates LVGL code, it inherits core LVGL concepts including properties, styles, and events.

Refer to LVGL Documentation for comprehensive information about native components.

Higher Order Component

Higher Order Components (HoCs) are composite components extended by anyui. Built upon Basic Components, HoCs encapsulate predefined behaviors and styling patterns. These components offer enhanced flexibility and significantly reduce development time when implementing complex user interfaces.

See Higher Order Component for implementation details and usage guidelines.

Template Component

Template Components are user-defined custom components. Users can persist modified properties and styles of existing components as reusable templates, enabling consistent UI elements across different sections of a project.

Refer to Template Component for detailed usage instructions.

Global Component

Global Components provide project-wide component sharing capabilities. Modifications to a Global Component's properties or styles automatically propagate to all instances of that component throughout the project.

A common use case is implementing a consistent Status Bar across multiple application views.

Property

Properties define the initial state of components. They are essential for configuring component appearance. Properties are categorized to common properties and widget specific properties. For example, width, height, x, y are common properties for all components, while arc_width are widget specific properties for components with Arc.

Style

Styles define the visual appearance of components. They are used to customize component properties such as background, border, padding and so on.

Component in different states can have different styles. For example, a button can have different styles for normal, pressed, disabled and so on.

Action

Actions represent LVGL events triggered by user interactions, also referred to as User Events. Examples include button presses, slider adjustments, and touch gestures.

Actions can be configured to modify component properties dynamically, switch to another screen, or trigger an animation, etc.

You can configure any action for any component, as long as LVGL supports. Also, you can configure actions for the same trigger and same target in order to achieve sequential execution. For example, with some button click, you can first remove hidden flag of a widget then play an animation to show it. It's highly flexible and allows you to create complex user interactions.

Command

Commands are messages transmitted from the upper layers (Application/UI) to lower layers (SDK/Hardware). Typical command examples include Bluetooth connection requests, WiFi configuration, and time synchronization operations.

Command is extended by anyui for communication between upper layers and lower layers.

Refer to Command for comprehensive command documentation.

Event

Events are asynchronous notifications originating from lower layers (SDK/Hardware) directed to upper layers (Application/UI), also known as System Events. Common event types include battery level changes, sensor data updates, and network status notifications.

Event is extended by anyui for communication between upper layers and lower layers.

Refer to Event for comprehensive event documentation.