Temple v0.5.0 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...">"
# }

Link to this section Summary

Link to this section Functions

Link to this macro

area(attrs \\ [])

View Source (macro)
Link to this macro

base(attrs \\ [])

View Source (macro)
Link to this macro

br(attrs \\ [])

View Source (macro)
Link to this macro

col(attrs \\ [])

View Source (macro)
Link to this macro

embed(attrs \\ [])

View Source (macro)
Link to this macro

hr(attrs \\ [])

View Source (macro)
Link to this macro

html(attrs \\ [], block)

View Source (macro)
Link to this macro

img(attrs \\ [])

View Source (macro)
Link to this macro

input(attrs \\ [])

View Source (macro)
Link to this macro

keygen(attrs \\ [])

View Source (macro)
Link to this macro

link(attrs \\ [])

View Source (macro)
Link to this macro

meta(attrs \\ [])

View Source (macro)
Link to this macro

param(attrs \\ [])

View Source (macro)
Link to this macro

source(attrs \\ [])

View Source (macro)
Link to this macro

track(attrs \\ [])

View Source (macro)
Link to this macro

wbr(attrs \\ [])

View Source (macro)