Evaluate conditional inside attribute in heex

Specifically when only a substring in an attribute’s value if dynamic. Here’s a concrete example. I’m translating some templates from .leex to .heex. I’m interested in ideas for translating this:

<div class="<%= if @published, do: "bg-green", else: "bg-red" %> text-white text-small border-grey">...</div>

This doesn’t seem to be supported, it generates a compile error:

<div class="{if @published, do: "bg-green", else: "bg-red"} text-white text-small border-grey">...</div>

I could create an additional assign called @bg_color and do this:

<div class="{@bg_color} text-white">...</div>

Or duplicate the common classes like this:

<div class={if @published, do: "bg-green text-white text-small border-grey", else: "bg-red text-white text-small border-grey"}>...</div>

Interested to hear if there are any other approaches.

Thanks!

One way you could write this is:
<div class={“#{if @published, do: "bg-green", else: "bg-red"} text-white text-small border-grey"}>...</div>

Although there may be a clearer way.

2 Likes

Another way to do this:

<div class={["text-white", "text-small", "border-grey"] ++ [(if @published, do: "bg-green", else: "bg-red")]}>...</div>

That is, using a list instead of string interpolation. This is however neither more concise nor better than @axelson’s solution, it’s just different. It may appeal to you if you prefer to use a list for your classes.

A more elegant way would be if LV allowed things like this:

<div class={%{"bg-green": @published, "bg-red": !@published, "text-small": true ...}}>...</div>

Like some front-end frameworks (e.g. Vuejs) already do. I was told that Surface supports this notation, though I haven’t tested it. I’m sure that LiveView will catch up at some point :slight_smile:

2 Likes

Great, thanks so much @axelson and @trisolaran , both approaches are big improvements. Thanks again!

2 Likes