James_E

James_E

HEEx: Pass through all attributes?

I have the following utility template, for a list that is required to be rendered as a grid whenever CSS is enabled:

<%!-- grid_list.html.heex -->
<ul
  class={[
    "tw-grid",
    "tw-grid-cols-#{Enum.count(@entries) |> :math.sqrt |> :math.ceil |> trunc}",
    @class
  ]}
>
  <li :for={entry <- @entries}>{render_slot(@inner_block, entry)}</li>
</ul>

<%!-- https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names
"tw-grid-cols-1"
"tw-grid-cols-2"
"tw-grid-cols-3"
"tw-grid-cols-4"
"tw-grid-cols-5"
"tw-grid-cols-6"
"tw-grid-cols-7"
"tw-grid-cols-8"
--%>

I invoke it, for example, as so:

<.grid_list :let={asset} entries={@state.assets} class="tw-p-1 tw-gap-1 sm:tw-p-4 sm:tw-gap-4">
  <.asset asset={asset}/>
</.grid_list>

So my question is: is there any way for me to have the template automatically pass through any “extra” attributes, such as title, that I invoke it with? Or do I have to hardcode the “whitelist” of allowed passthrough attributes?

First Post!

garrison

garrison

You can use global attributes. There is a whitelist, but the default includes all HTML global attributes (title is one of those). You can explicitly whitelist others in the attr call.

Most Liked

steffend

steffend

Phoenix Core Team

When you want to use attr / slot with an external .heex file you need to define an empty function head in the .ex file that has embed_templates. There’s an example in the docs: Phoenix.Component — Phoenix LiveView v1.2.5

Where Next?

Popular in Questions Top

minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New

Other popular topics Top

joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 44265 214
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New

We're in Beta

About us Mission Statement