Skip to main content

Dropdown

Dropdown is a special API component in ElenixOS for displaying and selecting dropdown options. This document will introduce the features, usage methods, and precautions of the dropdown component.

Feature Introduction​

The dropdown component allows developers to create a dropdown list for displaying and selecting options. Dropdown menus are typically used for selection lists, setting options, and other scenarios.

Usage Methods​

Create Dropdown​

Use the new lv.dropdown() constructor to create a dropdown object:

// Create dropdown object
const dropdown = new lv.dropdown(eos.view.active());

Configure Dropdown​

Use the following methods to configure the dropdown:

// Set dropdown size
 dropdown.setSize(200, 50);

// Set dropdown position
 dropdown.setPos(10, 10);

// Set dropdown options
const options = "Option 1\nOption 2\nOption 3\nOption 4";
 dropdown.setOptions(options);

// Set dropdown default option
 dropdown.setSelected(0);

// Set dropdown expansion direction
 dropdown.setDir(lv.DIR.BOTTOM);

Bind Events​

Use the addEventCb method to bind events:

// Bind option selection event
 dropdown.addEventCb((e) => {
    const selected =  dropdown.getSelected();
    eos.console.log("Selected option:", selected);
}, lv.EVENT_VALUE_CHANGED, null);

Example: Create a Simple Dropdown​

// Create dropdown
const dropdown = new lv.dropdown(eos.view.active());
dropdown.setSize(200, 50);
dropdown.align(lv.ALIGN_CENTER, 0, 0);

// Set options
const options = "Option 1\nOption 2\nOption 3\nOption 4";
dropdown.setOptions(options);

// Bind event
dropdown.addEventCb((e) => {
    const selected = dropdown.getSelected();
    eos.console.log("Selected option:", selected);
}, lv.EVENT_VALUE_CHANGED, null);

Example: Create a Dropdown with Icons​

// Create dropdown
const dropdown = new lv.dropdown(eos.view.active());
dropdown.setSize(200, 50);
dropdown.align(lv.ALIGN_CENTER, 0, 0);

// Set options with icons
const options = "\uF001 Option 1\n\uF002 Option 2\n\uF003 Option 3";
dropdown.setOptions(options);

// Bind event
dropdown.addEventCb((e) => {
    const selected = dropdown.getSelected();
    eos.console.log("Selected option:", selected);
}, lv.EVENT_VALUE_CHANGED, null);