Curly bracket if else heex format?

Phoenix Forum Questions / Help
,
#1

Is it possible to do an if-else-end in the new curly bracket HEEX format?

<div class={ if post.featured do }
               max-w-md mx-auto bg-white featured rounded-xl shadow-md overflow-hidden md:max-w-2xl
         { else }
              max-w-md mx-auto bg-white featured rounded-xl shadow-md overflow-hidden md:max-w-2xl
         { end } >

doesn’t work

I want to change some CSS based on post.is_featured? and the old syntax now breaks in HEEX

<%= if post.featured do %>
         featured
      <div class="max-w-md mx-auto bg-white featured rounded-xl shadow-md overflow-hidden md:max-w-2xl">
         <% else %>
         not
      <div class="max-w-md mx-auto bg-white featured rounded-xl shadow-md overflow-hidden md:max-w-2xl">
         <% end %>

If I wrap the entire div the HEEX error checking fails claiming too many divs

_post-card.html.heex:29:5: missing opening tag for </div>
1 Like
#2

I would use something like this.

class={if ..., do: "...", else: "..."}

But because You have such long classes, I would add helper

For example

class={class_for(post)}
3 Likes
#3

The Gorilla is right. You can also combine a few other tricks if you want to have more-but-smaller sets of classes.

(insert what_class? function where appropriate)

<div class={true && "font-bold"}>
  class="font-bold"
</div>

<div class={false && "font-bold"}>
  class="" (actually it's discarded entirely from the html), 
  because it's really `class={false}`, and because of how html works,
  we want to discard the whole attribute, otherwise
  `checked={false}` would mean `checked=""` which would end up *checking* check boxes
</div>

<div class={"#{false && "font-bold"}"}>
  class="false", because `false && _` => `false`, and #{false} => "false" :)
</div>

<div class={[false && "font-bold", not false && "italic", "text-green-500"]}>
  class="italic text-green-500", lists are a good way to handle it too.
</div>

So in your original post I might write

<div class={["max-w-md mx-auto bg-white rounded-xl overflow-hidden md:max-w-2xl", is_featured(post) && "featured shadow-lg"]}>
1 Like
#4

Your classes above are identical under both if and else. Assuming they differ only in the “featured” part, something like this should do fine:

class={“max-w-md mx-auto bg-white#{if post.featured, do: " featured”, else: " not_featured"} rounded-xl shadow-md overflow-hidden md:max-w-2xl"}

#5

thanks, late night post

in .eex below works, fails in .heex

      <div class="max-w-md mx-auto bg-white featured <%= if post.featured do %>rounded-xl shadow-md<% else %>rounded-sm shadow-sm<% end %> overflow-hidden md:max-w-2xl">

working through examples provided (THANKS) now

#6

lots of great syntax examples here, but this one works for me

      <div class={if post.featured, do: ["max-w-md mx-auto bg-white rounded-md shadow-xl overflow-hidden md:max-w-2xl"], else: ["max-w-md mx-auto bg-white rounded-sm shadow-sm overflow-hidden md:max-w-2xl"]}>

note for old schoolie time Sublime Text users, the syntax checker does not like the above example, yes, I know, I should be using VI or an IDE, etc