Elm-Ui-Widgets 3.0 - Towards a full Material Design implementation

Orasund/elm-ui-widgets has just hit version 3.0. There’s a lot that has been added, but the biggest news is that this should be the last major update before it’s a feature complete implementation of the Material Design UI Components. (Feature complete meaning that at least every feature of the JS version is implemented)

Checkout this list of all implemented widgets sofar.

If you want to help out, here is a list of all missing features. They should all be quite easy to implement as long as you have some knowledge of mdgriffith/elm-ui. I’d be happy to assist, if someone would like to tackle one of them. I’ll properly come back to the issues myself and finish it, once my life has become less stressful. (I’m about to finish university, and then need to find a job aswell :see_no_evil:)

There are a lot of new features added in this release, but I’d like to showcase two that have made the most impact.

Lists

Lists are a very essential part of material design, and it took some time for me to finally implement them in a way, that is very customizable.

We now have a complete implementation of lists. This means that any widget that had previously needed a workaround can now be implemented with ease. Most notably this includes side sheets, top- and bottom bars and dialog windows. They are all included in this release. Checkout the website to see all of them in action.

Icons

I went the extra mile and made sure that any icon package existing on package.elm-lang.org is supported (without adding any dependencies).

icon

To do so, I’ve added a module that contains one function for every package. Each function comes with some code snippet that can be copy and pasted without needing to worry about anything.

{-| Example for including Feather Icons -}
import FeatherIcons
import Widget.Icon exposing (Icon)

check : Widget.Icon
check =
    FeatherIcons.check
        |> Widget.Icon.elmFeather FeatherIcons.toHtml

I can’t emphasize enough how useful this is. Packages can be mixed and matched and even swapped out without needing to think about it. I am really liking this solution and I hope you like it too :wink:

Edit:
If you don’t want to wait for the feature complete release, you can always use aforemny/material-components-web-elm. It’s a wrapper around the Material UI Web Components. Sadly using Web Components means that you can’t use Elm Reactor, so keep that in mind, and I’m not sure if it supports Elm-Ui. Other than that I can only recommand using it.

17 Likes

This is wonderful! Thank you so much for making it!

3 Likes

I’ve been following this from the beginning and it’s amazing to see how far it’s come! Congrats @Lucas_Payr! And best of luck with graduation and the job hunt!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.