List

Ordered and unordered lists

Preview

  • Item 1
  • Item 2
  • Item 3

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.ListComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :items, fn -> [] end)
    assigns = assign_new(assigns, :ordered, fn -> false end)

    ~H"""
    <%= if @ordered do %>
      <ol class="list-decimal list-inside space-y-2">
        <%= for item <- @items do %>
          <li class="text-gray-700"><%= item %></li>
        <% end %>
      </ol>
    <% else %>
      <ul class="list-disc list-inside space-y-2">
        <%= for item <- @items do %>
          <li class="text-gray-700"><%= item %></li>
        <% end %>
      </ul>
    <% end %>
    """
  end
end