Dropdownlist.md

Component Dropdownlist mapping lvgl lv_dropdown)

Api

• style
• moveToFront
• moveToBackground
• setStyle
• scrollIntoView

Props

• style
• align
• alignTo
• items
  • value type: string[]
• arrow
  • value type: enum EDropdownListArrowDirection
• selectIndex
  • current select item index in items array
• text
• direction
  • value type: enum EDropdownlistDirection `- highlightSelect
  • highlight current select item
• onChange

Controlled Mode

Component Checkbox support controlled mode, achieve by selectIndex and onChange props

Usage

import { Dropdownlist, EDropdownListArrowDirection, EDropdownlistDirection } from 'lvlgjs-ui'
import { useState } from 'react'

const items1 = [
    "Apple",
    "Banana",
    "Orange",
    "Cherry",
    "Grape",
    "Raspberry",
    "Melon",
    "Orange",
    "Lemon",
    "Nuts",
]

function Component () {
    const [value, setValue] = useState(false)
    return (
      <Dropdownlist
        style={style.dropdownlist}
        onChange={(e) => setValue(e.value)}
        items={items1}
        selectIndex={2}
        direction={EDropdownlistDirection.bottom}
        text={"Menu"}
        highlightSelect={false}
        arrow={EDropdownListArrowDirection.down}
      />
    )
}

const style = {
    dropdownlist: {},
}

Demo

test/dropdownlist