From 5b7be6666912870c85addb5227c4b470fc790c52 Mon Sep 17 00:00:00 2001 From: "donghwan.yu" Date: Thu, 9 Jul 2026 15:05:54 +0900 Subject: [PATCH 1/3] Fix setSelectIndex method name typo in Dropdownlist The selectIndex prop setter called comp.setselectIndex (lower-case 's'), which does not match the native binding setSelectIndex. --- src/render/react/components/Dropdownlist/comp.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/render/react/components/Dropdownlist/comp.ts b/src/render/react/components/Dropdownlist/comp.ts index aee1d275c..31765130a 100644 --- a/src/render/react/components/Dropdownlist/comp.ts +++ b/src/render/react/components/Dropdownlist/comp.ts @@ -43,7 +43,7 @@ function setListProps(comp, newProps: DropdownListProps, oldProps: DropdownListP }, selectIndex(selectIndex) { if (selectIndex !== oldProps.selectIndex) { - comp.setselectIndex(selectIndex); + comp.setSelectIndex(selectIndex); } }, text(text) { From eaf51e337a78ef9c90b608c184949819eb4fb954 Mon Sep 17 00:00:00 2001 From: "donghwan.yu" Date: Thu, 9 Jul 2026 15:27:57 +0900 Subject: [PATCH 2/3] fix(dropdownlist): avoid trailing empty option in setItems The previous setItems() appended "\n" after every item, which left a trailing newline at the end of the options string. --- src/render/native/components/dropdownlist/dropdownlist.cpp | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/render/native/components/dropdownlist/dropdownlist.cpp b/src/render/native/components/dropdownlist/dropdownlist.cpp index b42b04d96..3794fbae2 100644 --- a/src/render/native/components/dropdownlist/dropdownlist.cpp +++ b/src/render/native/components/dropdownlist/dropdownlist.cpp @@ -19,9 +19,8 @@ void Dropdownlist::setItems (std::vector& items) { } else { std::string str; for(int i=0; i < items.size(); i++) { - std::string item = items[i]; - item.append("\n"); - str.append(item.c_str()); + if (i > 0) str.append("\n"); + str.append(items[i]); } str.append("\0"); lv_dropdown_set_options(this->instance, str.c_str()); From bc9ad5f1ea681d856ed305a99396622fe3784801 Mon Sep 17 00:00:00 2001 From: "donghwan.yu" Date: Fri, 10 Jul 2026 11:26:48 +0900 Subject: [PATCH 3/3] Add missing documents for Arc, GIF and Tabs Missing documents has been included. --- doc/component/Arc.md | 80 +++++++++++++++++++++++++++++++++++++++++++ doc/component/GIF.md | 55 +++++++++++++++++++++++++++++ doc/component/Tabs.md | 65 +++++++++++++++++++++++++++++++++++ readme.md | 3 ++ 4 files changed, 203 insertions(+) create mode 100644 doc/component/Arc.md create mode 100644 doc/component/GIF.md create mode 100644 doc/component/Tabs.md diff --git a/doc/component/Arc.md b/doc/component/Arc.md new file mode 100644 index 000000000..e9c258a31 --- /dev/null +++ b/doc/component/Arc.md @@ -0,0 +1,80 @@ +# Component Arc mapping [lvgl lv_arc)](https://docs.lvgl.io/master/widgets/arc.html) + +## Api +- [style](../api/style.md) +- [moveToFront](../api/moveToFront.md) +- [moveToBackground](../api/moveToBackground.md) +- [setStyle](../api/setStyle.md) +- [scrollIntoView](../api/scrollIntoView.md) + +## Props +- [style](../props/style.md) +- [align](../props/align.md) +- [alignTo](../props/alignTo.md) +- [onPressedStyle](../props/onPressedStyle.md) +- [indicatorStyle](../props/indicatorStyle.md) +- [onIndicatorPressedStyle](../props/onIndicatorPressedStyle.md) +- [knobStyle](../props/knobStyle.md) +- [onKnobPressedStyle](../props/onKnobPressedStyle.md) +- [onChange](../props/onChange/3.md) +- [range](../props/range.md) +- [value](../props/value/2.md) +- startAngle, set [the start angle of the indicator arc](https://docs.lvgl.io/master/widgets/arc.html#angles), zero degree is at the middle right (3 o'clock) of the object and the degrees are increasing in clockwise direction + - type Number (0-360) +- endAngle, set the end angle of the indicator arc + - type Number (0-360) +- backgroundStartAngle, set the start angle of the background arc + - type Number (0-360) +- backgroundEndAngle, set the end angle of the background arc + - type Number (0-360) +- rotation, set [an offset to the zero degree position](https://docs.lvgl.io/master/widgets/arc.html#rotation) + - type Number +- mode, controll [how the indicator arc is drawn between the range value](https://docs.lvgl.io/master/widgets/arc.html#modes), with following values + - normal, symmetrical, reverse +- changeRate, limit [the max rate of the value change on click](https://docs.lvgl.io/master/widgets/arc.html#change-rate), in degrees per second + - type Number + +## Controlled Mode +Component Arc support [controlled mode](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-05/), achieve by onChange and value props + +## Usage +```jsx +import { Arc } from 'lvgljs-ui' +import { useState } from 'react' + +function Component () { + const [value, setValue] = useState(50) + return ( + + {/* controlled */} + setValue(e.value)} + value={value} + range={[0, 100]} + /> + {/* not controlled */} + console.log(e.value)} + /> + + ) +} + +const style = { + arc: { + width: 150, + height: 150, + }, + indicator: {}, + knob: {}, +} +``` diff --git a/doc/component/GIF.md b/doc/component/GIF.md new file mode 100644 index 000000000..394a03e9d --- /dev/null +++ b/doc/component/GIF.md @@ -0,0 +1,55 @@ +# Component GIF mapping [lvgl lv_gif)](https://docs.lvgl.io/master/libs/gif.html) + +## Api +- [style](../api/style.md) +- [moveToFront](../api/moveToFront.md) +- [moveToBackground](../api/moveToBackground.md) +- [setStyle](../api/setStyle.md) +- [scrollIntoView](../api/scrollIntoView.md) +- pause, pause the GIF animation +- resume, resume the paused GIF animation + +## Props +- [style](../props/style.md) +- [align](../props/align.md) +- [alignTo](../props/alignTo.md) +- [onClick](../props/onClick.md) +- [src](../props/src.md) +- paused, controll the play state of the GIF animation, when true pause the animation, when false resume it (also applied after the GIF loads) + - type Boolean + +## Usage +```jsx +import { GIF, EAlignType } from 'lvgljs-ui' +import { useState } from 'react' + +const path = require('path') +function Component () { + const [paused, setPaused] = useState(false) + return ( + + + + setPaused((prev) => !prev)} + /> + + ) +} + +const style = { + gif: { + width: 'auto', + height: 'auto', + }, +} +``` + +## Demo +test/gif diff --git a/doc/component/Tabs.md b/doc/component/Tabs.md new file mode 100644 index 000000000..4d505d380 --- /dev/null +++ b/doc/component/Tabs.md @@ -0,0 +1,65 @@ +# Component Tabs mapping [lvgl lv_tabview)](https://docs.lvgl.io/master/widgets/tabview.html) + +Each child of Tabs becomes the content of one tab, matched in order with the names in the tabs prop. + +## Api +- [style](../api/style.md) +- [moveToFront](../api/moveToFront.md) +- [moveToBackground](../api/moveToBackground.md) +- [setStyle](../api/setStyle.md) +- [scrollIntoView](../api/scrollIntoView.md) + +## Props +- [style](../props/style.md) +- [align](../props/align.md) +- [alignTo](../props/alignTo.md) +- [onClick](../props/onClick.md) +- [onPressed](../props/onPressed.md) +- [onLongPressed](../props/onLongPressed.md) +- [onLongPressRepeat](../props/onLongPressRepeat.md) +- tabs, set the name of each tab button, each child of Tabs is matched to a tab name in order + - type String[] +- tabPosition, control [the position of the tab buttons](https://docs.lvgl.io/master/widgets/tabview.html), only applied on creation, with following values + - left, top (default), right, bottom +- tabSize, control the size of the tab buttons area (height for top/bottom position, width for left/right position), only applied on creation + - type Number + +## Usage +```jsx +import { Tabs, View, Text } from 'lvlgjs-ui' + +function Component () { + return ( + + + Profile tab content + + + Analytics tab content + + + Shop tab content + + + ) +} + +const style = { + tabs: { + width: 480, + height: 320, + }, + tabContent: { + width: '100%', + height: '100%', + }, +} +``` + +## Demo +demo/widgets diff --git a/readme.md b/readme.md index 14c44d312..ea67048a4 100644 --- a/readme.md +++ b/readme.md @@ -61,6 +61,9 @@ to compile for a target device. - [Keyboard](./doc/component/Keyboard.md) - [Calendar](./doc/component/Calendar.md) - [Chart](./doc/component/Chart.md) +- [Arc](./doc/component/Arc.md) +- [GIF](./doc/component/GIF.md) +- [Tabs](./doc/component/Tabs.md) ## Font [Buitin-Symbol](./doc/Symbol/symbol.md)