Component Button mapping lvgl lv_btn)

Api

• style
• moveToFront
• moveToBackground
• setStyle
• scrollIntoView

Props

• style
• onPressedStyle
• onClick
• onPressed
• onLongPressed
• onLongPressRepeat
• align
• alignTo

Usage

import { Button, Text, Image } from 'lvlgjs-ui'
import { useRef, useState } from 'react'

function Component () {
    const ref = useRef()
    const [imageShow, setImageShow] = useState(false)
    useEffect(() => {
        console.log(ref.current.moveToFront())
    }, [])

    return (
        <React.Fragment>
            {imageShow && <Image
                alignTo={{
                    parent: ref.current,
                    type: EAlignType.ALIGN_CENTER,
                    pos: [10, 0]
                }}
            />}
            <Button
                ref={ref}
                style={style.button}
                onPressedStyle={style.onPressedStyle}
                onClick={() => setImageShow(true)}
                onPressed={() => console.log('button onPressed')}
                onLongPressed={() => console.log('button onPressed')}
                onLongPressRepeat={() => console.log('button onLongPressRepeat')}
          >
              <Text>test</Text>
          </Button>
        </React.Fragment>
    )
}

const style = {
    onPressedStyle: {},
    button: {},
}

Demo

test/button