[Pas2js] html widgets layout question

[mister highball]

This may or may not be helpful to you, but my framework Nyx has relative, fixed, and proportional layouts built in. Basic elements like text, buttons, checkbox, and multi line input are done (for the browser). The relative layout would let you specify an anchor to use (other element) and specify how far from this anchor and what what alignment (left, center, right).
Still a lot to do since it's a work in progress but maybe you'll find some use since all UI is meant to be defined in code.

I would much rather point you to actual documentation or more complete examples but I don't have them at this point. Instead here are a few independant examples showing how to
1. Create a ui
2. Create a container to hold elements
3. Add the container and elements to ui with optional handlers for observable events
4. Render to the screen

* how to add a click handler to button - https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L377

* how to display an inout element - https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L396

* how to add a checkbox - https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L416

* how to multi line input with handler for text change - https://github.com/mr-highball/nyx/blob/340265a03bcefa5dbaf19fdbd8f342d607424aa7/test/nyx_browser_test.lpr#L434

* fairly complete to-do list (once a listbox element is added to nyx then a to-do list will be a lot simpler but this shows how to add a bunch or elements together for something) - https://github.com/mr-highball/nyx/blob/master/demos/browser/todo-list/todo_list.lpr

Hopefully someone else may also be able to provide some more insight into accomplishing this the standard way too using just htmlwidgets unit.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freepascal.org/pipermail/pas2js/attachments/20201002/f6b0f234/attachment.htm>