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