In the react ecosystem, classnames modules is everyones favorite to conditionally add and remove css classes.
ELM, provide built in support for the same by classList in Html.Attributes
Using classList
classList function will accept a list of Tuples. The type annotation of argument is List (String, Bool). Each tuple should be paired with a css classname and a boolean value. The second value in Tuple can be expression which yeilds a Boolean value.
import Html exposing (..)
import Html.Attributes exposing (classList)
navbar : model -> Html Action
navbar model =
nav [] [
a [ classList [
("nav-item", True),
("active", model.selectedTab == Home)
]
] [text "Home"],
a [ classList [
("nav-item", True),
("active", model.selectedTab == About)
]
] [text "About"],
a [ classList [
("nav-item", True),
("active", model.selectedTab == Talks)
]
] [text "Talks"],
a [ classList [
("nav-item", True),
("active", model.selectedTab == Feed)
]
] [text "Feed"]
]
In the above snippet, the css class nav-item will be always present since it always True but the active
class will be added when the associated expression returns true.
Hope that helped. Thanks for reading.