Roller.md

Component Dropdownlist mapping lvgl lv_roller)

Api

• style
• moveToFront
• moveToBackground
• setStyle
• scrollIntoView

Props

• style
• align
• alignTo
• selectedStyle
• infinity
  • makes the roller circular
• options
  • value type: string[]
• selectIndex
  • current select item index in items array
• visibleRowCount
  • The number of visible rows
• onChange

Controlled Mode

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

Usage

import { Roller } from 'lvlgjs-ui'
import { useState } from 'react'

const items = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
]
function Component () {
    const [value, setValue] = useState(false)
    return (
      <Roller
        style={style.roller}
        options={items}
        selectIndex={2}
        visibleRowCount={4}
        onChange={(e) => {
            console.log(e.value)
        }}
        infinity={true}
      />
    )
}

const style = {
    roller: {},
}

Demo

test/roller