Tips for Creating Responsive UI in HaxeUI

Questions
1

Hey everyone

I have hit a bit of a wall when it comes to making my UI responsive across different screen sizes. I have been playing around with layouts like HBox and VBox but I am interested if there are better ways to handle more advanced, dynamic layouts.

How do you manage resizing elements without messing up the overall design??
Are there any HaxeUI components or tricks that work best for responsiveness?
What is the best way to test responsiveness during development??

Also, I have been comparing how tools like Uipath handle interface adaptability & I want to hear if anyone has tips for achieving similar flexibility with HaxeUI.

Also i have check this; How to create multiple forms (like in Winforms) in Haxeui? witch is good. If there are any tips please share with me.

Thank you

2

Hi @nixiekhf …

To make haxeui more responsive you can use component-examples/responsive/assets/main.css at original · haxeui/component-examples · GitHub

You should try to use the power css … you can do some great things in haxeui is having the layout in css.
Instead of doing

<vbox>
<hbox />
</vbox>

you can do

<box id="box1">
<box styleNames="hor" />
</box>

#box1 {
	layout:vertical
}

.hor {
	layout:horizontal
}

You can also use min-width max-width in css. But it’s quite buggy for now… If you feel adventurous you can try this PR WIP Constraints by Shallowmallow · Pull Request #651 · haxeui/haxeui-core · GitHub and tell me whay you think

Oh another trick … you can also set columns of grid by layout ( in css too… layout-columns I think)

    <box layout="grid" layoutColumns="3">
        <button text="1"/>
        <button text="1"/>
        <button text="1"/>
        <button text="1"/>
        <button text="1"/>
        <button text="1"/>
    </box>