elm-classnames
A simple utility for conditionally joining html classes together. Essentially an Elm port of JedWatson's excellent javascript classnames library.
Usage
This utility helps simplify the generation of html class strings based on one or more conditions. As the number of conditions grows, this can become more challenging to manage. By passing a list of (String, Bool) tuples to the exposed classNames function, this becomes much easer.
import Html exposing (Html, div, text)
import Html.Attributes exposing (class)
import ClassNames exposing (classNames)
view: Bool -> Bool -> Html msg
view isActive isSelected =
let
itemClasses =
classNames
[ ("item", True) -- This class should always be assigned.
, ("is-active", isActive) -- `is-active` will be added when isActive == True
, ("is-selected, isSelected) -- `is-selected` will be added when isSelected == True
]
in
div [ class itemClasses ] [text "Item"]Calling view True False will generate the following Html: <div class="item is-active">Item</div>.
Contributing
Pull requests are welcome!
