Ui.Attribute

Customizing UI Elements: HTML Attributes

Web browsers and adaptive devices use attributes to apply default styling and build interactive functionality into HTML markup. For example, adding a title attribute to an element will cause browsers to display a tooltip with the title value when the user hovers over that element. This module provides a compact but flexible syntax for adding HTML attributes to UI elements.

Generic functions for setting HTML attributes

add : ( String, String -> Property msg ) -> Element msg -> Element msg

Add a single attribute to a UI element. The first argument in the tuple gives the attribute name. For the second argument in the tuple, use one of the functions in Dom.Property or Dom.Attribute from danielnarey/elm-semantic-dom to specify how the attribute value should be assigned (see the documentation in these modules).

myPhoto
  |> Ui.Attribute.add
    ( "title", Dom.Property.string "My summer vaction" )

Alternatively, if it makes more sense to you, you could use the function this way with the same result:

myNavbar
  |> Ui.Attribute.add
    ( "My summer vaction"
    , Json.Encode.string
      >> VirtualDom.property "title"
    )

addList : List ( String, String -> Property msg ) -> Element msg -> Element msg

Add a list of attributes to a UI element

myPhoto
  |> Ui.Attribute.addList
    [ ("title", Dom.Property.string "My summer vaction")
    , ("hidden", Dom.Property.bool True)
    ]

Helpers for common global attributes

title : String -> Element msg -> Element msg

Convenience function to set the title property

myPhoto
  |> Ui.Attribute.title "My summer vacation"

hidden : Bool -> Element msg -> Element msg

Convenience function to set the hidden property

myPhoto
  |> Ui.Attribute.hidden True

Helpers for common ARIA attributes

role : String -> Element msg -> Element msg

Convenience function to set the ARIA role attribute

myElement
  |> Ui.Attribute.role "presentation"

ariaLabel : String -> Element msg -> Element msg

Convenience function to set the aria-label attribute

myNavbar
  |> Ui.Attribute.ariaLabel "Main navigation"

ariaLabelledBy : String -> Element msg -> Element msg

Convenience function to set the aria-labelledby attribute

myFigure
  |> Ui.Attribute.ariaLabelledBy "figure-caption-3"

ariaDescribedBy : String -> Element msg -> Element msg

Convenience function to set the aria-describedby attribute

myPhoto
  |> Ui.Attribute.ariaDescribedBy "article-section-5"

ariaHidden : Element msg -> Element msg

Convenience function to set aria-hidden="true"

decorativeIcon
  |> Ui.Attribute.ariaHidden

danielnarey/elm-modular-ui/1.0.0

Ui.Attribute

Customizing UI Elements: HTML Attributes

Generic functions for setting HTML attributes

Helpers for common global attributes

Helpers for common ARIA attributes

Modules