Skip to main content

Dropdown

Dropdown is a special API component in ElenixOS used to display and select dropdown options. This document describes the functionality, usage methods, and notes for the dropdown component.

Feature Introduction​

The dropdown component allows developers to create a dropdown menu that displays a list of options. Users can click on the dropdown to expand the menu and select an option. Dropdowns are typically used for selecting from a list of choices.

Usage Methods​

Creating Dropdown​

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

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

Configuring Dropdown​

Use the following methods to configure the dropdown:

// Set dropdown size
dropdown.setSize(150, 40);

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

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

// Set selected option by index
dropdown.setSelected(0);

Binding Events​

Use the addEventCb method to bind events:

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

Example: Creating a Simple Dropdown​

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

// Set dropdown 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 index:", selected);
}, lv.EVENT_VALUE_CHANGED, null);