Insert value inside html attribute with Heex?

Before Heex I could do something like this:

<div id="profile" class="border-2 bg-white px-4 py-1 <%= if @user.active, do: "bg-white", else: "bg-gray" %>>

How do I do this with Heex?

You’d do:

 <div id="profile" class={"border-2 bg-white px-4 py-1 #{if @user.active, do: "bg-white", else: "bg-gray"}"}>

Another general example:

attribute={"string"} => string
attribute={@variable} => interprets the variable
attribute={something(arg1, arg2)} => interprets the function

<%= for item <- list do %>
 <div id={item.id} ...></div>
 <div class={if item.size > 2, do: "special-class", else: "regular-class"}></div>
 <div class={"always-this-class #{if item.color == "blue", do: "blue-background-class"}"}></div>
<% end %>
2 Likes