Temple (Temple v0.8.0) View Source

Temple syntax is available inside the temple, and is compiled into EEx at build time.

Usage

temple do
  # You can define attributes by passing a keyword list to the element, the values can be literals or variables.
  class = "text-blue"
  id = "jumbotron"

  div class: class, id: id do
    # Text nodes can be emitted as string literals or variables.
    "Bob"

    id
  end

  # Attributes that result in boolean values will be emitted as a boolean attribute. Examples of boolean attributes are `disabled` and `checked`.

  input type: "text", disabled: true
  # <input type="text" disabled>

  input type: "text", disabled: false
  # <input type="text">

  # The class attribute also can take a keyword list of classes to conditionally render, based on the boolean result of the value.

  div class: ["text-red-500": false, "text-green-500": true] do
    "Alert!"
  end

  # <div class="text-green-500">Alert!</div>

  # if and unless expressions can be used to conditionally render content
  if 5 > 0 do
    p do
      "Greater than 0!"
    end
  end

  unless 5 > 0 do
    p do
      "Less than 0!"
    end
  end

  # You can loop over items using for comprehensions
  for x <- 0..5 do
    div do
      x
    end
  end

  # You can use multiline anonymous functions, like if you're building a form in Phoenix
  form_for @changeset, Routes.user_path(@conn, :create), fn f ->
    "Name: "
    text_input f, :name
  end

  # You can explicitly emit a tag by prefixing with the Temple module
  Temple.div do
    "Foo"
  end

  # You can also pass children as a do key instead of a block
  div do: "Alice", class: "text-yellow"
end

Whitespace Control

By default, Temple will emit internal whitespace into tags, something like this.

span do
  "Hello, world!"
end
<span>
  Hello, world!
</span>

If you need to create a "tight" tag, you can call the "bang" version of the desired tag.

span! do
  "Hello, world!"
end
<span>Hello, world!</span>

Configuration

Mode

There are two "modes", :normal (the default) and :live_view.

In :live_view mode, Temple emits markup that uses functions provided by Phoenix LiveView in order to be fully "diff trackable". These LiveView functions have not been released yet, so if you are going to combine Temple with LiveView, you need to use the latest unreleased default branch from GitHub.

You should use :live_view mode even if you only have a single LiveView.

config :temple, :mode, :normal # default

# or

config :temple, :mode, :live_view

Aliases

You can add an alias for an element if there is a namespace collision with a function. If you are using Phoenix.HTML, there will be namespace collisions with the <link> and <label> elements.

config :temple, :aliases,
  label: :_label,
  link: :_link,
  select: :_select

temple do
  _label do
    "Email"
  end

  _link href: "/css/site.css"
end

This will result in:

<label>
  Email
</label>

<link href="/css/site.css">

Link to this section Summary

Functions

Compiles temple markup into a quoted expression using the given EEx Engine.

Context for temple markup.

Link to this section Functions

Link to this macro

compile(engine, block)

View Source (macro)

Compiles temple markup into a quoted expression using the given EEx Engine.

Returns the same output that Phoenix templates output into the render/1 function of their view modules.

Usage

require Temple

Temple.compile Phoenix.HTML.Engine do
  div class: @class do
    "Hello, world!"
  end
end

Context for temple markup.

Returns an EEx string that can be passed into an EEx template engine.

Usage

import Temple

temple do
  div class: @class do
    "Hello, world!"
  end
end

# <div class="<%= @class %>">
#   Hello, world!
# </div>