https://github.com/bburdette/elm-ui-examples
https://github.com/bburdette/elm-ui-examples
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bburdette/elm-ui-examples
- Owner: bburdette
- License: bsd-3-clause
- Created: 2019-04-01T14:10:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-07-04T23:40:34.000Z (about 1 year ago)
- Last Synced: 2025-07-05T00:33:01.385Z (about 1 year ago)
- Language: Elm
- Size: 34.2 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
# stopping event propogation
you can stop event propogation on an Element.link or Element.button with:
```
Element.link [ Element.htmlAttribute <| Html.Events.stopPropagationOn "click" (JD.succeed ( , True ))]
{ url = ... , label = ... }
```