PaackEng / paack-ui / UI.Utils.Element

Utilities and functionality that are not covered by Elm UI.

Render

renderIf : Basics.Bool -> Element msg -> Element msg

Utility to conditionally render an element. This is not meant for big/complex view functions due to performance implications.

Element.row [] []
    |> renderIf model.shouldDisplay

Color

colorSetOpacity : Basics.Float -> Element.Color -> Element.Color

Overwrite alpha value in an Element.Color.

colorTransition : Basics.Int -> List (Element.Attribute msg)

Enable CSS transition for HTML's color, background-color, border-color. Time is set in miliseconds.

Element.el
    (Background.color someVariatingColor :: Element.colorTransition 200)
    someChildElement

Responsiveness

desktopMaximum : UI.RenderConfig.RenderConfig -> Basics.Int -> Element.Length

Limit Element.fill only when on desktop.

Element.width (Element.desktopMaximum 640)

HTML features

svg : String -> List (Svg.Attribute msg) -> List (Svg msg) -> Element msg

The SVG element, with ARIA attributes applied.

svg "Alt text" svgAttributes svgContent

title : String -> Element.Attribute msg

"The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element." - W3Schools

Element.el [ Element.title "Some text" ] someChildElement

maxHeightVH : Basics.Int -> Element.Attribute msg

Wrapper for CSS's max-height: {{vaue}}vh.

Element.el [ Element.maxHeightVH 100 ] someChildElement

maxHeightPct : Basics.Float -> Element.Attribute msg

Wrapper for CSS's max-height: {{vaue}}%.

Element.el [ Element.maxHeightPct 100 ] someChildElement

minHeightVH : Basics.Int -> Element.Attribute msg

Wrapper for CSS's min-height: {{vaue}}vh.

Element.el [ Element.minHeightVH 50 ] someChildElement

Input

disabled : List (Element.Attribute msg)

All the attributes that define an element as disabled for modifying.

Element.el Element.disabled <| Element.text "Some content"

onEnterPressed : msg -> Element.Attribute msg

Trigger message when the users press return-key while element is on-focus.

Element.el [ Element.onEnterPressed Msg.ActivateSomething ] someChildElement

onIndividualClick : msg -> Element.Attribute msg

Equivalent to Element.onClick with stopPropagation and preventDefault applied.

Element.el
    [ Element.onIndividualClick Msg.CoolTextClicked ]
    (Element.text "Cool text")

nameUsername : Element.Attribute msg

LastPass (the password manager) expects both username and password inputs to be inside an HTML form. As we can't create forms with elm-ui, to trigger the username's autofill, we need either id or name equals to "username".

This function sets the attribute name="username".

namePassword : Element.Attribute msg

LastPass (the password manager) expects both username and password inputs to be inside an HTML form. As we can't create forms with elm-ui, to trigger the password's autofill and username all at once, we need either id or name equals to "password".

This function sets the attribute name="password".

Padding, borders and size


type alias RectangleSides =
{ top : Basics.Int
, left : Basics.Int
, right : Basics.Int
, bottom : Basics.Int 
}

The classic top, left, right and bottom as integers record.

zeroPadding : RectangleSides

Zero-initialized record for paddings and borders.

Element.paddingEach
    { zeroPadding | bottom = 20 }

Transition

fadeOut : Transition msg

A transition that fades away an element

slideOutLeft : Transition msg

A transition that hides the element sliding it to the left

transition : Basics.Bool -> Transition msg -> List (Element.Attribute msg)

Applies the attributes of a transition for the given on/off state

Element.row
    (onClick DoSomething
        :: transition isCollapsed fadeOut
    )
    []