Evaluate conditional inside attribute in heex

Phoenix Forum Questions / Help
,
1

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!

1 Like
2

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.

4 Likes
3

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:

4 Likes
4

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

2 Likes
5

You can join strings:

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

Note the space after “border-gray”

6

Depending on your use case you could also do this…

<div data-published={@published} class="bg-gray-500 data-[published]:bg-green-500"></div>
1 Like