Orasund / elm-layout / Layout

Experiments with semantical Html elements

Html elements

Layouting

none : Html msg

none : Html msg
none =
    Html.text ""

divWrapper : List (Html.Attribute msg) -> Html msg -> Html msg

divWrapper : List (Attribute msg) -> Html msg -> Html msg
divWrapper attrs content =
    Html.div attrs [ content ]

spanWrapper : List (Html.Attribute msg) -> Html msg -> Html msg

spanWrapper : List (Attribute msg) -> Html msg -> Html msg
spanWrapper attrs content =
    Html.span attrs [ content ]

pWrapper : List (Html.Attribute msg) -> Html msg -> Html msg

pWrapper : List (Attribute msg) -> Html msg -> Html msg
pWrapper attrs content =
    Html.p attrs [ content ]

divText : List (Html.Attribute msg) -> String -> Html msg

divText : List (Attribute msg) -> String -> Html msg
divText attrs string =
    Html.div attrs [ Html.text string ]

spanText : List (Html.Attribute msg) -> String -> Html msg

spanText : List (Attribute msg) -> String -> Html msg
spanText attrs string =
    Html.span attrs [ Html.text string ]

pText : List (Html.Attribute msg) -> String -> Html msg

pText : List (Attribute msg) -> String -> Html msg pText attrs string = Html.p attrs [ Html.text string ]

Elements

image : List (Html.Attribute msg) -> { src : String, description : String } -> Html msg

image attrs args =
    Html.img
        ([ Html.Attributes.src args.src
         , Html.Attributes.alt args.description
         ]
            ++ attrs
        )
        []

linkTo : List (Html.Attribute msg) -> String -> Html msg -> Html msg

linkTo attrs link content =
    Html.a
        (Html.Attributes.href link
            :: attrs
        )
        [ content ]

linkToNewTab : List (Html.Attribute msg) -> String -> Html msg -> Html msg

linkToNewTab attrs link content =
    Html.a
        ([ Html.Attributes.href link
         , Html.Attributes.target "_blank"
         ]
            ++ attrs
        )
        [ content ]

Attributes

asButton : { onPress : Maybe msg, label : String } -> List (Html.Attribute msg)

Turns anything into a button

asButton args =
    [ Html.Attributes.style "cursor" "pointer"
    , Html.Attributes.attribute "aria-label" args.label
    , Html.Attributes.attribute "role" "button"
    ]
        ++ (args.onPress
                |> Maybe.map (\msg -> [ Html.Events.onClick msg ])
                |> Maybe.withDefault []
           )