View Source List

Overview

Each element inside the list is given its own row.

<List>
    <%= for sport <- @sports do %>
        <Text id={sport.id}><%= sport.name %></Text>
    <% end %>
</List>

Edit Mode

Use an <EditButton> to enter edit mode. This will allow rows to be moved, selected, and deleted.

<EditButton />
<List> ... </List>

Selecting Rows

Use the selection attribute to set the selected row(s).

<List selection={@selected_sports} phx-change="selection-changed">
    ...
</List>

Deleting and Moving Rows

Set an event name for the phx-delete attribute to enable the system delete action. An event is sent with the index of the item to delete.

<List phx-delete="on_delete">
    ...
</List>

defmodule MyAppWeb.SportsLive do
    def handle_event("on_delete", %{ "index" => index }, socket) do
        {:noreply, assign(socket, :items, List.delete_at(socket.assigns.items, index))}
    end
end

Use the phx-move event to enable the system move actions. An event is sent with the index of the item to move and its destination index.

<List phx-move="on_move">
    ...
</List>

defmodule MyAppWeb.SportsLive do
    def handle_event("on_move", %{ "index" => index, "destination" => destination }, socket) do
        {element, list} = List.pop_at(socket.assigns.sports, index)
        moved = List.insert_at(list, (if destination > index, do: destination - 1, else: destination), element)
        {:noreply, assign(socket, :sports, moved)}
    end
end

Attributes

• selection

Events

• phx-delete
• phx-move

SwiftUI Documentation

See SwiftUI.List for more details on this View.

References

<List phx-delete="on_delete">
    ...
</List>

defmodule MyAppWeb.SportsLive do
    def handle_event("on_delete", %{ "index" => index }, socket) do
        {:noreply, assign(socket, :items, List.delete_at(socket.assigns.items, index))}
    end
end

<List phx-move="on_move">
    ...
</List>

defmodule MyAppWeb.SportsLive do
    def handle_event("on_move", %{ "index" => index, "destination" => destination }, socket) do
        {element, list} = List.pop_at(socket.assigns.sports, index)
        moved = List.insert_at(list, (if destination > index, do: destination - 1, else: destination), element)
        {:noreply, assign(socket, :sports, moved)}
    end
end