Elm's Html module constructs HTML nodes by asking you to provide, among other things, a list of HTML attributes. So, you might typically see something like:
div [ class "ui button primary" , onClick DoLogin ] [ text "Login" ]
Sometimes it is convenient to build up the list of attributes through a series of computations. One can, of course, simply use functions that return lists of attributes and combine them together ... perhaps something like this:
div ( List.concat [ computation1 model , computation2 user , [ class "another-class" , style [("position", "absolute")] ] ] ) [ text "Login" ]
And, in Elm 0.18, Elm does some things you might expect with this:
If you provide multiple "class" attributes, they get combined appropriately. (This wasn't the case in Elm 0.17, which was actually the original motivation for this package).
If you provide multiple "style" attributes, they are all used.
However, sometimes you might want to build attributes up using types that give you some more fine-tuned control. That is the purpose of this package. It allows you to something like this:
import Html.AttributeBuilder as AB AB.attributeBuilder |> AB.union (computation1 model) |> AB.union (computation2 user) |> AB.addClass "another-class" |> AB.removeClass "unwanted-class" |> AB.addStyle "position" "absolute" |> AB.toAttributes
What you get at the end of such a pipeline is a
constructed in a way that you might enjoy.
For the detailed API, see the Elm package site, or the links to the right, if you're already there.
elm-package install Gizra/elm-attribute-builder
Try something like:
git clone https://github.com/Gizra/elm-attribute-builder cd elm-attribute-builder npm install npm test