DidactMacros
Trying to understand html.heex Phoenix component Slots
I having difficulty understanding what’s happening here:
slot :inner_block, required: true
def button(assigns) do
~H"""
<button>
{render_slot(@inner_block)}
</button>
"""
end
The expression render_slot(@inner_block) renders the HEEx content. You can invoke this function component like so:
<.button>
This renders <strong>inside</strong> the button!
</.button>
Which renders the following HTML:
<button>
This renders <strong>inside</strong> the button!
</button>
Inner block is not used as a colonned(?) tag. Yet in another example…
Slot attributes
Unlike the default slot, it is possible to pass a named slot multiple pieces of HEEx content. Named slots can also accept attributes, defined by passing a block to the
slot/3macro. If multiple pieces of content are passed,render_slot/2will merge and render all the values.Below is a table component illustrating multiple named slots with attributes:
slot :column, doc: "Columns with column labels" do
attr :label, :string, required: true, doc: "Column label"
end
attr :rows, :list, default: []
def table(assigns) do
~H"""
<table>
<tr>
<th :for={col <- @column}>{col.label}</th>
</tr>
<tr :for={row <- @rows}>
<td :for={col <- @column}>{render_slot(col, row)}</td>
</tr>
</table>
"""
end
You can invoke this function component like so:
<.table rows={[%{name: "Jane", age: "34"}, %{name: "Bob", age: "51"}]}>
<:column :let={user} label="Name">
{user.name}
</:column>
<:column :let={user} label="Age">
{user.age}
</:column>
</.table>
…we have slots in the colon tag form.
Marked As Solved
jswanner
inner_block is basically the “default slot”, its whatever is within <.button> and </.button> that’s not inside a named slot (colonned tag, as you put it)
Also Liked
abuislam
You’re on the right track! inner_block is the default slot, capturing content inside the component. Named slots like :column allow multiple pieces of HEEx content with attributes. Hope that helps!
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
- #forms
- #api
- #metaprogramming
- #security
- #hex









