Phoenix LiveView

## Components `@rest` can be used to specify additional named attributes. ```neovim {"update":true,"path":"_/code/17359144908861.ex","timestamp":1735914493891} <pre> attr :message, :string, required: true attr :rest, :global # Can also provide defaults attr :rest, :global, default: %{class: "bg-blue-200"} # Can also limit which fields are included attr :rest, :global, include: ~w(form) def notification(assigns)do ~H""" <span {@rest}>{@message}</span> """ end # Later ~H""" <.notification message="You've got mail!" class="bg-green-200" phx-click="close" /> """ </pre> ``` ^17359144908861 Can also specify prefixes to include automatically: ```neovim {"update":true,"path":"_/code/17359144908670.ex","timestamp":1735914493459} <pre> use Phoenix.Component, global_prefixes: ~w(x-) </pre> ``` ^17359144908670 ## Slots ```neovim {"update":true,"path":"_/code/1735914673281.ex","timestamp":1735914685442} <pre> slot :inner_block, required: true def button(assigns) do ~H""" <button> {render_slot(@inner_block)} </button> """ end </pre> ``` ^1735914673281 Like the attr/3 macro, using the slot/3 macro will provide compile-time validations. For example, invoking button/1 without a slot of HEEx content will result in a compilation warning being emitted: Can also pass non-default options though (inner_block is the default one): ```neovim {"update":true,"path":"_/code/1735915098301.ex","timestamp":1735915143049} <pre> slot :inner_block, required: true attr :entries, :list, default: [] def unordered_list(assigns) do ~H""" <ul :for={entry <- @entries}> <li>{render_slot(@inner_block, entry)}</li> </ul> """ end # ... later ~H""" <.unordered_list :let={fruit} entries={~w(apples bananas cherries)}> I like <b>{fruit}</b>! </.unordered_list> """ </pre> ``` ^1735915098301 And other named slots ```neovim {"update":true,"path":"_/code/1735915452280.ex","timestamp":1735915948505} <pre> slot :header slot :inner_block, required: true slot :footer, required: true def modal(assigns) do ~H""" <div class="modal"> <div class="modal-header"> {render_slot(@header) || "Modal"} </div> <div class="modal-body"> {render_slot(@inner_block)} </div> <div class="modal-footer"> {render_slot(@footer)} </div> </div> """ end # .... ~H""" <.modal> This is the body, everything not in a named slot is rendered in the default slot. <:footer> This is the bottom of the modal. </:footer> </.modal> """ # More complicated example 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 ~H""" <.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> """ </pre> ``` ^1735915452280