A record containing all of the data needed to construct an HTML node (via VirtualDom.Node). This is an alias for Dom.Element in danielnarey/elm-semantic-dom.

By using a record to temporarily store data about a node, we can partially construct that node with some data, but delay building it until all of the data has been assembled. In this way, all of a node's data is available to be modified until it is either placed in a container element or passed as an argument to the Ui.render function.

Construct an element with no children

Ui.leaf "hr"
  |> Ui.render


--> <hr />

Construct an element with a text node as its only child

"Time to make the donuts!"
  |> Ui.textWrapper "p"
  |> Ui.render


--> <p>Time to make the donuts!</p>

Construct an element with some children

[ "Time to make the donuts!"
  |> Ui.textWrapper "p"
]
  |> Ui.container "div"
  |> Ui.render


--> <div>
--    <p>Time to make the donuts!</p>
--  </div>

Add an element, component, or layout class when using a generic constructor

"This text is in a box."
  |> Ui.textWrapper "p"
  |> Ui.addClass "box"

To maintain a consistent pattern, use Ui.Modifier.add or Ui.Modifier.addList to append additional modifier classes. Note, however, that this is just semantic sugar — Ui.addClass and Ui.Modifier.add are equivalent (both are aliases for Dom.Element.addClass).

"This text is in a box."
  |> Ui.textWrapper "p"
  |> Ui.addClass "box"
  |> Ui.Modifier.addList
    [ "is-size-3"
    , "has-text-weight-bold"
    , "has-text-centered"
    ]

Set the id field on a Ui.Element record, the value of which will be assigned to the element's id attribute upon rendering

myMenu
  |> Ui.setId "sidebar-menu"

Render an element record to HTML (via the native JavaScript implementation backing elm-lang/virtual-dom).

Note that you only need to call this function once — rendering the root node of a tree renders all of its children.