Abstraction for working with Weak Css
style class names.
ClassName type describes class selector used to style element.
All strings are sanitized to prevent missuse and odd resulting selectors.
It's highly recommended to avoid spaces, __
and --
in arguments though.
namespace : String -> ClassName
Construct ClassName
with given namespace.
import Html.Attributes exposing (class)
namespace "menu" |> toClass
--> class "menu"
add : String -> ClassName -> ClassName
Add element
import Html.Attributes exposing (class)
namespace "menu"
|> add "list"
|> toClass
--> class "menu__list"
addMany : List String -> ClassName -> ClassName
Add new elements from list.
import Html.Attributes exposing (class)
namespace "menu"
|> addMany ["item", "link"]
|> toClass
--> class "menu__item--link"
toClass : ClassName -> Html.Attribute msg
Convert ClassName
to Html.Attribute msg
.
import Html.Attributes exposing (class)
namespace "menu"
|> toClass
--> class "menu"
namespace "menu"
|> add "list"
|> toClass
--> class "menu__list"
nest : String -> ClassName -> Html.Attribute msg
Add new element and convert to Html.Attribute msg
.
import Html.Attributes exposing (class)
namespace "menu"
|> nest "item"
--> class "menu__item"
namespace "menu"
|> add "item"
|> nest "link"
--> class "menu__item--link"
nestMany : List String -> ClassName -> Html.Attribute msg
Add new elements from list and convert it all to Html.Attribute msg
.
import Html.Attributes exposing (class)
namespace "menu"
|> nestMany ["item", "link"]
--> class "menu__item--link"
namespace "menu"
|> nestMany ["item"]
--> class "menu__item"
withStates : List ( String, Basics.Bool ) -> ClassName -> Html.Attribute msg
Add state to last element ClassName
and convert to Html.Attribute msg
.
import Html.Attributes exposing (class)
isActive : Bool
isActive =
True
isHighlighted : Bool
isHighlighted =
False
namespace "menu"
|> add "item"
|> withStates
[ ( "active", isActive )
, ( "highlighted", isHighlighted )
]
--> class "menu__item active"
namespace "menu"
|> withStates []
--> class "menu"
withActiveStates : List String -> ClassName -> Html.Attribute msg
Add state to last element ClassName
and convert to Html.Attribute msg
.
import Html.Attributes exposing (class)
namespace "menu"
|> add "item"
|> withActiveStates [ "active", "highlighted" ]
--> class "menu__item active highlighted"
namespace "menu"
|> withActiveStates []
--> class "menu"
toString : ClassName -> String
Convert the ClassName
into a String