ezmodex v0.4.0 Ezmodex.Elements
Provides functions to create HTML element trees and its nodes such as html5 doctype and safe text
Elements
Following HTML elements are currently supported
html base head link meta style title body address article aside footer header h1 h2 h3 h4 h5 h6 hgroup nav section dd del div dl dt figcaption figure hr ins li main ol p pre ul a abbr b bdi bdo br cite code dfn em i kbd mark q rp rt rtc ruby s samp small span strong sub sup time u var wbr area audio img map track video embed object param source canvas noscript script caption col colgroup table tbody td tfoot th thead tr button datalist fieldset form input label legend meter optgroup option output progress select textarea details dialog menu menuitem summary content element shadow template
Each element accepts 2 optional parameters, a map of attributes and a list of child elements
The result of calling the element functions is a list that can be collapsed to a HTML string
Uncollapsed example
iex> ul [ li [ text("Tom & Jerry") ] ]
["<ul>", "<li>", "Tom & Jerry", "</li>", "</ul">]
iex> Enum.join(ul [ li [ text("Tom & Jerry") ] ], "")
"<ul><li>Tom & Jerry</li></ul>"All following examples below will only show the collapsed version
Element Examples
iex> html
"<html></html>"
iex> p(%{ class: "stuff" })
"<p class="stuff"></p>"
iex> ul [ li [ text("Item") ]
"<ul><li>Item</li></ul>"
iex> a %{ href: "https://google.com" }, [ text("Google") ]
"<a href="https://google.com">Google</a>"The following empty elements will not render a closing tag and will discard any child elements
base link meta hr br wbr area img track embed object source col input menuitem
Empty Element Examples
iex> img
"<img>"
iex> link %{ rel: "stylesheet", href: "styles.css" }
"<link rel="stylesheet" href="styles.css">"
iex> hr [ div ]
"<hr>"Summary
Types
Element tree is a list that contains either strings or Element trees
Functions
Creates a HTML tag out of the string passed in as first argument
Convenience function that will create a html5 doctype and wrap all children in and tags. Should be used as the root element of the view section
Safely inserts a string of text to the element tree. Uses the Ezmodex.HTML.Sanitizer to escape special characters
Types
Element tree is a list that contains either strings or Element trees
Functions
build_element(String.t, map, element_tree) :: element_tree
Creates a HTML tag out of the string passed in as first argument.
Accepts map of attributes as second argument and a list of children as third.
Allows creation of custom elements not supported as standard.
Examples
iex> build_element("bunny", %{ awesomeness: "high" }, [])
"<bunny awesomeness="high"></bunny>"Convenience function that will create a html5 doctype and wrap all children in and tags. Should be used as the root element of the view section.
Example
iex> html5 [ head, body ]
"<!DOCTYPE html><html><head></head><body</body></html>"