Utilities and functionality that are not covered by Elm UI.
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
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
desktopMaximum : UI.RenderConfig.RenderConfig -> Basics.Int -> Element.Length
Limit Element.fill
only when on desktop.
Element.width (Element.desktopMaximum 640)
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
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"
.
{ 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 }
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
)
[]