Skip to main content

Component Introduction

There're three types of components: basic component, higher order component and template component. The screen itself is the largest container component.

Basic components​

Basic component is what LVGL provides. It can be divided into container type and non-container type, according to whether they have children.

Container​

Container component has its own properties and styles, and can contain other container components and non-containers. In the component tree, container component is a parent node.

Container component and its sub components can be moved or dragged into another container component.

When moving sub components inside a container component, the sub components will be aligned with the container component and other sub components.

Here below are the types of container components:

  • Screen
  • Container

Non-container​

Non-container has its own properties and styles, and can't contain other components. In the component tree, non-container is a leaf node.

On the component tree, you can select a non-container, and drag it into a container component.

Higher Order Component​

Higher Order Component (HoC) is a composite component that wraps a bunch of basic components with pre-defined bahaviours. It provides great convenience and flexibility targeting on specific scenarios. Refer to Higher Order Component for more details.

Template components​

Template component is a user component template. Users can save modified properties and styles of components as template components. Template components