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

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

Overwrite alpha value in an Element.Color.

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

Limit Element.fill only when on desktop.

Element.width (Element.desktopMaximum 640)

The SVG element, with ARIA attributes applied.

svg "Alt text" svgAttributes svgContent

"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

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

Element.el [ Element.maxHeightVH 100 ] someChildElement

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

Element.el [ Element.maxHeightPct 100 ] someChildElement

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

Element.el [ Element.minHeightVH 50 ] someChildElement

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

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

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

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

Equivalent to Element.onClick with stopPropagation and preventDefault applied.

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

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".

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".

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

Zero-initialized record for paddings and borders.

Element.paddingEach
    { zeroPadding | bottom = 20 }