elm-ui-examples

This is a collection of tweaks, hacks, and examples that I've found helpful (or at least interesting), while building things with elm-ui.

Do you have some code that belongs here? Contributions welcome. Maybe some of these things will find their way into a more coherent form at some point.

Also check out rofrol's repo here: https://github.com/rofrol/elm-ui-cookbook

simple dialog

displaying elements centered in front of other elements: https://ellie-app.com/dYb8K3K38NPa1

for an actual dialog you'd probably want to map the events from the background to a Noop msg.

code block

I wanted a text area to display code - preserving whitespace but still doing line wrap. This works as expected, wrapping on spaces and then breaking words if necessary. https://ellie-app.com/dQTRJhnwV4za1

here's a horizontally scrolling version: https://ellie-app.com/dRM6XjdZf3Xa1

(non) blinky fonts.

Using Element.Font.external results in blinky UI due to font reloading.

Here are a couple of ellies showing the blink problem and then fixing it by loading the font in the html.

Before, with blinking: https://ellie-app.com/5JtKXXPmpKta1 After, blinking fixed: https://ellie-app.com/5JvNzmS5Qxba1

toggle

fancy animated toggle switch: https://ellie-app.com/85HbWTjCGWha1

tooltips

tooltips plus some interesting 'never' usage: https://ellie-app.com/7R2VHTzHJYYa1

highlighting rows in elm-ui tables

you have to track the highlight row in the model, and put mouse events in each cell:

https://ellie-app.com/kSZPrk5BCRNa1