HEEx language preview

1. User card component

function components, slots, and :if/:for special attributes

horizon-dark

<%!-- user card component --%>
<.card class={@highlighted && "border-blue-500"}>
  <:header>
    <h2>{@user.name}</h2>
  </:header>

  <p :if={@user.bio}>{@user.bio}</p>

  <ul>
    <%= for post <- @posts do %>
      <li>{post.title}</li>
    <% end %>
  </ul>

  <.button phx-click="follow" disabled={@following}>
    Follow
  </.button>
</.card>

atom-one-dark

<%!-- user card component --%>
<.card class={@highlighted && "border-blue-500"}>
  <:header>
    <h2>{@user.name}</h2>
  </:header>

  <p :if={@user.bio}>{@user.bio}</p>

  <ul>
    <%= for post <- @posts do %>
      <li>{post.title}</li>
    <% end %>
  </ul>

  <.button phx-click="follow" disabled={@following}>
    Follow
  </.button>
</.card>

github-dark

<%!-- user card component --%>
<.card class={@highlighted && "border-blue-500"}>
  <:header>
    <h2>{@user.name}</h2>
  </:header>

  <p :if={@user.bio}>{@user.bio}</p>

  <ul>
    <%= for post <- @posts do %>
      <li>{post.title}</li>
    <% end %>
  </ul>

  <.button phx-click="follow" disabled={@following}>
    Follow
  </.button>
</.card>

dracula

<%!-- user card component --%>
<.card class={@highlighted && "border-blue-500"}>
  <:header>
    <h2>{@user.name}</h2>
  </:header>

  <p :if={@user.bio}>{@user.bio}</p>

  <ul>
    <%= for post <- @posts do %>
      <li>{post.title}</li>
    <% end %>
  </ul>

  <.button phx-click="follow" disabled={@following}>
    Follow
  </.button>
</.card>

nord

<%!-- user card component --%>
<.card class={@highlighted && "border-blue-500"}>
  <:header>
    <h2>{@user.name}</h2>
  </:header>

  <p :if={@user.bio}>{@user.bio}</p>

  <ul>
    <%= for post <- @posts do %>
      <li>{post.title}</li>
    <% end %>
  </ul>

  <.button phx-click="follow" disabled={@following}>
    Follow
  </.button>
</.card>

github

<%!-- user card component --%>
<.card class={@highlighted && "border-blue-500"}>
  <:header>
    <h2>{@user.name}</h2>
  </:header>

  <p :if={@user.bio}>{@user.bio}</p>

  <ul>
    <%= for post <- @posts do %>
      <li>{post.title}</li>
    <% end %>
  </ul>

  <.button phx-click="follow" disabled={@following}>
    Follow
  </.button>
</.card>

2. EEx output and statement tags

<%= %> / <% %> tags with an if/for block

horizon-dark

<div class="notifications">
  <%= if @unread_count > 0 do %>
    <span class="badge">{@unread_count}</span>
  <% end %>

  <ul>
    <%= for notification <- @notifications do %>
      <li>{notification.message}</li>
    <% end %>
  </ul>
</div>

atom-one-dark

<div class="notifications">
  <%= if @unread_count > 0 do %>
    <span class="badge">{@unread_count}</span>
  <% end %>

  <ul>
    <%= for notification <- @notifications do %>
      <li>{notification.message}</li>
    <% end %>
  </ul>
</div>

github-dark

<div class="notifications">
  <%= if @unread_count > 0 do %>
    <span class="badge">{@unread_count}</span>
  <% end %>

  <ul>
    <%= for notification <- @notifications do %>
      <li>{notification.message}</li>
    <% end %>
  </ul>
</div>

dracula

<div class="notifications">
  <%= if @unread_count > 0 do %>
    <span class="badge">{@unread_count}</span>
  <% end %>

  <ul>
    <%= for notification <- @notifications do %>
      <li>{notification.message}</li>
    <% end %>
  </ul>
</div>

nord

<div class="notifications">
  <%= if @unread_count > 0 do %>
    <span class="badge">{@unread_count}</span>
  <% end %>

  <ul>
    <%= for notification <- @notifications do %>
      <li>{notification.message}</li>
    <% end %>
  </ul>
</div>

github

<div class="notifications">
  <%= if @unread_count > 0 do %>
    <span class="badge">{@unread_count}</span>
  <% end %>

  <ul>
    <%= for notification <- @notifications do %>
      <li>{notification.message}</li>
    <% end %>
  </ul>
</div>

3. Attribute interpolation and special attributes

{...} attribute values plus :if/:for directives

horizon-dark

<ul class={["list", @compact && "list--compact"]}>
  <li
    :for={item <- @items}
    :if={item.visible}
    class={item.active && "active"}
  >
    {item.label}
  </li>
</ul>

atom-one-dark

<ul class={["list", @compact && "list--compact"]}>
  <li
    :for={item <- @items}
    :if={item.visible}
    class={item.active && "active"}
  >
    {item.label}
  </li>
</ul>

github-dark

<ul class={["list", @compact && "list--compact"]}>
  <li
    :for={item <- @items}
    :if={item.visible}
    class={item.active && "active"}
  >
    {item.label}
  </li>
</ul>

dracula

<ul class={["list", @compact && "list--compact"]}>
  <li
    :for={item <- @items}
    :if={item.visible}
    class={item.active && "active"}
  >
    {item.label}
  </li>
</ul>

nord

<ul class={["list", @compact && "list--compact"]}>
  <li
    :for={item <- @items}
    :if={item.visible}
    class={item.active && "active"}
  >
    {item.label}
  </li>
</ul>

github

<ul class={["list", @compact && "list--compact"]}>
  <li
    :for={item <- @items}
    :if={item.visible}
    class={item.active && "active"}
  >
    {item.label}
  </li>
</ul>