Material Components for the Web v7 released

Show and Tell
1

I’ve just released version 7 of elm-mdc. elm-mdc is a port of Google’s Material Components for the Web. We keep the meticulously crafted SCSS, but the JavaScript part is rewritten in Elm.

This makes for a very nice fit with Elm, and far fewer issues when upgrading to newer versions of this library.

12 Likes
2

What’s the difference between this project and https://github.com/aforemny/material-components-web-elm?

1 Like
3

The latter one uses the JavaScript, and Elm is only a thin wrapper on top of this. The advantage is that you get exactly the same JavaScript, so the Elm conversion can’t introduce any bugs, but also can’t fix anything.

IMO pure Elm is the way to go. Often you need to build your own components build on top of the library, and having the Elm code handy makes this much more possible.

3 Likes
4

I get this point, but so much of material design is about little, stateful UI effects. I recall that the original MD ports were really hard to use because Elm imposed a lot of boilerplate on users to handle the state, and the recourse now web components felt like a good idea, although I’ve not tried the end result.

Have you been able to reduce the boilerplate burden?

5

I don’t see much boiler plate, for example this is a contact form for one of my pages:

                    [ Card.view
                          [ ]
                          [ TextField.view Mdc
                              "organisation"
                              mdc
                              [ TextField.label "Organisation"
                              , TextField.autocomplete "organisation"
                              ]
                              []
                          , TextField.view Mdc
                              "name"
                              mdc
                              [ TextField.label "Your name"
                              , TextField.autocomplete "name"
                              ]
                              []
                          , TextField.view Mdc
                              "email"
                              mdc
                              [ TextField.label "Email"
                              , TextField.autocomplete "email"
                              ]
                              []
                          , TextField.view Mdc
                              "phone"
                              mdc
                              [ TextField.label "Phone number"
                              , TextField.autocomplete "tel-national"
                              ]
                              []
                          , TextField.view Mdc
                              "message"
                              mdc
                              [ TextField.label "Your message"
                              , TextField.textarea
                              , TextField.rows 10
                              ]
                              []
                          , Button.view Mdc
                              "send"
                              mdc
                              [ Button.unelevated
                              ]
                              [ text "Send message" ]
                          ]
6

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