Defines a custom component.

Components are the primary way to extract partials and markup helpers.

Assigns

Components accept a keyword list or a map of assigns and can be referenced in the body of the component by a module attribute of the same name.

This works exactly the same as EEx templates.

Children

If a block is passed to the component, it can be referenced by a special assign called @children.

Example

defcomponent :flex do
  div id: @id, class: "flex" do
    @children
  end
end

temple do
  flex id: "my-flex" do
    div "Item 1"
    div "Item 2"
    div "Item 3"
  end
end

# {:safe, "<div id="my-flex" class="flex">
#            <div>Item 1</div>
#            <div>Item 2</div>
#            <div>Item 3</div>
#          </div>"}

Emits a Phoenix partial into the markup.

temple do
  html lang: "en" do
    head do
      title "MyApp"

      link rel: "stylesheet", href: Routes.static_path(@conn, "/css/app.css")
    end

    body do
      main role: "main", class: "container" do
        p get_flash(@conn, :info), class: "alert alert-info", role: "alert"
        p get_flash(@conn, :error), class: "alert alert-danger", role: "alert"

        partial render(@view_module, @view_template, assigns)
      end

      script type: "text/javascript", src: Routes.static_path(@conn, "/js/app.js")
    end
  end
end

Creates a markup context.

All tags must be called inside of a Temple.temple/1 block.

Returns a safe result of the form {:safe, result}

Example

team = ["Alice", "Bob", "Carol"]

temple do
  for name <- team do
    div class: "text-bold" do
      text name
    end
  end
end

# {:safe, "<div class="text-bold">Alice</div><div class="text-bold">Bob</div><div class="text-bold">Carol</div>"}

Emits a text node into the markup.

temple do
  div do
    text "Hello, world!"
  end
end

# {:safe, "<div>Hello, world!</div>"}