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
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
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
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









