Temple v0.4.4 Temple.Html View Source
The Temple.Html
module defines macros for all HTML5 compliant elements.
Temple.Html
macros must be called inside of a Temple.temple/1
block.
Note: Only the lowest arity macros are documented. Void elements are defined as a 1-arity macro and non-void elements are defined as 0, 1, and 2-arity macros.
Attributes
Html accept a keyword list or a map of attributes to be emitted into the element's opening tag. Multi-word attribute keys written in snake_case (data_url
) will be transformed into kebab-case (data-url
).
Children
Non-void elements (such as div
) accept a block that can be used to nest other tags or text nodes. These blocks can contain arbitrary Elixir code such as variables and for comprehensions.
If you are only emitting a text node within a block, you can use the shortened syntax by passing the text in as the first parameter of the tag.
Example
temple do
# empty non-void element
div()
# non-void element with keyword list attributes
div class: "text-red", id: "my-el"
# non-void element with map attributes
div %{:class => "text-red", "id" => "my-el"}
# non-void element with children
div do
text "Hello, world!"
for name <- @names do
div data_name: name
end
end
# non-void element with a single text node
div "Hello, world!", class: "text-green"
# void elements
input name: "comments", placeholder: "Enter a comment..."
end
# {:safe,
# "<div></div>
# <div class="text-red" id="my-el"></div>
# <div>
# Hello, world!
# <div data-name="Alice"></div>
# <div data-name="Bob"></div>
# <div data-name="Carol"></div>
# </div>
# <div class="text-green">Hello, world!</div>
# <input name="comments" placeholder="Enter a comment...">"
# }