temple icon indicating copy to clipboard operation
temple copied to clipboard

[feature] Pass component module as slot name

Open mhanberg opened this issue 3 years ago • 0 comments

It would be cool to be able to pass a component as the slot name, allowing easier composition of shared markup.

Now

defmodule TempleExampleWeb.Components.LinkList do
  import Temple.Component

  defcomp Item do
    a class: "text-blue-500 hover:underline", href: @url do
      slot :default
    end
  end

  render do
    for {social, url} <- @socials do
      li do
        span do
          slot :link, url: url, text: social
        end
      end
    end
  end
end

# usage
c LinkList, socials: @user.socials do
  slot :link, %{text: text, url: url} do
    c LinkList.Item, url: url do
      text
    end
  end
end

Then

defmodule TempleExampleWeb.Components.LinkList do
  import Temple.Component

  defcomp Item do
    a class: "text-blue-500 hover:underline", href: @url do
      slot :default, text: @text
    end
  end

  render do
    for {social, url} <- @socials do
      li do
        span do
          slot LinkList.Item, url: url, text: social
        end
      end
    end
  end
end

# usage
c LinkList, socials: @user.socials do
  slot LinkList.Item, %{text: text} do
    text
  end
end

Something like that at least

mhanberg avatar May 23 '21 18:05 mhanberg