First of all, as the author of the TabbedPages container, I’d like to apologize for the complexity. That component is really meant as an experiment to see what is possible using Elm and the Elm Architecture along with inline styles. In short, the idea of the component is to allow for a tabs+swipeable pages components where the contents of both the tabs and the pages are unknown and the entire thing is styled using inline styles. This is probably the hardest route for making a component, although it has its advantages.
As for implementing widgets, think of Elm as a means of authoring Html (like a super advanced Jade). This means that you can just write html and give each div some classes and style those classes in CSS (or whatever pre-processesor you choose). This means that, no, your widgets would not need as much work as TabbedPages.
The best course of action would probably be to include the CSS and probably redo the JS part in Elm. This would give you a lot of the guarantees from Elm without having to pay too much of a cost in working on the component.
As for components in the wild, unfortunately there aren’t many out there currently as Elm is still young. This will probably change in the future, but currently this is not the case.
Finally, for the hamburger menus, there are two great packages in Elm that deliver svg icons
- TheSeamau5/elm-material-icons
- jystic/elm-font-awesome
Between the two there’s like a little under 1000 icons to choose from (I think, I haven’t really counted) and they’re just functions, so they’re super easy to use. They produce Svg which is just another name for the Html type so you can just work with the two interchangeably.
In short, currently, the best way to go is to author your html and logic in Elm and your styles in CSS (or Sass/Less/Stylus/etc…). And the bulk of your logic would simply consist in switching the classes you put in the divs, like with jQuery.
To do so, I recommend following the Elm architecture:
init : Options -> Model
update : Action -> Model -> Model
-- or update : Action -> Model -> (Model, Effects Action)
-- if you need effects like http
view : Address Action -> Model -> Html
As for inline styles, don’t worry too much for the moment. It is a work in progress and a lot of breakthroughs are happening in that space (like elm-css) and you’ll probably start seeing some blog posts and components appearing whenever folks start mastering it. (unfortunately, this is what happens when you tinker with the cutting edge… although, if you wanna join in the fun of discovering, the Elm community is very welcoming and it’s quite fun because it seems everyone is learning together :D)