Tabs
Tabbed content navigation
Preview
Content 1
Props Editor
Source Code
defmodule FeenixUiWeb.Components.TabsComponent do use Phoenix.Component def render(assigns) do assigns = assign_new(assigns, :tabs, fn -> [] end) assigns = assign_new(assigns, :active, fn -> nil end) active_tab = Enum.find(assigns.tabs, fn tab -> tab.id == assigns.active end) || List.first(assigns.tabs) assigns = assign(assigns, :active_tab, active_tab) ~H""" <div> <div class="border-b border-gray-200"> <nav class="-mb-px flex space-x-8"> <%= for tab <- @tabs do %> <button class={[ "py-2 px-1 border-b-2 font-medium text-sm", if(tab.id == @active, do: "border-primary-500 text-primary-600", else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300") ]}> <%= tab.label %> </button> <% end %> </nav> </div> <div class="mt-4"> <%= if @active_tab do %> <div class="p-4 bg-gray-50 rounded-lg"> <p class="text-gray-700"><%= @active_tab.content %></p> </div> <% end %> </div> </div> """ end end