Packages
noora
0.82.2
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/tab_menu.ex
defmodule Noora.TabMenu do
@moduledoc """
Tab menu components.
## Example
```elixir
<.tab_menu_horizontal>
<.tab_menu_horizontal_item
label="Overview"
patch={~p"/products/\#{@product}/overview"}
selected={@tab == :overview}
/>
<.tab_menu_horizontal_item
label="Analytics"
patch={~p"/products/\#{@product}/analytics"}
selected={@tab == :analytics}
>
<:icon_left>
<.chart_icon />
</:icon_left>
</.tab_menu_horizontal_item>
<.tab_menu_horizontal_item
label="Settings"
patch={~p"/products/\#{@product}/settings"}
selected={@tab == :settings}
/>
</.tab_menu_horizontal>
```
"""
use Phoenix.Component
import Noora.Utils
attr(:label, :string, required: true, doc: "The label of the menu item.")
attr(:rest, :global)
slot(:icon_left, doc: "Icon displayed on the left of an item")
slot(:icon_right, doc: "Icon displayed on the right of an item")
def tab_menu_vertical(assigns) do
~H"""
<div class="noora-tab-menu-vertical" {@rest}>
<%= if has_slot_content?(@icon_left, assigns) do %>
<div data-part="icon-left">
{render_slot(@icon_left)}
</div>
<% end %>
<span data-part="label">{@label}</span>
<%= if has_slot_content?(@icon_right, assigns) do %>
<div data-part="icon-right">
{render_slot(@icon_right)}
</div>
<% end %>
</div>
"""
end
attr(:rest, :global)
slot(:inner_block, required: true)
def tab_menu_horizontal(assigns) do
~H"""
<div class="noora-tab-menu-horizontal" {@rest}>
{render_slot(@inner_block)}
</div>
"""
end
attr(:label, :string, required: true, doc: "The label of the menu item.")
attr(:selected, :boolean, default: false, doc: "Whether the item is selected.")
attr(:navigate, :string, default: nil, doc: "Navigate to a different LiveView")
attr(:patch, :string, default: nil, doc: "Patches the current LiveView")
attr(:href, :string, default: nil, doc: "External page to link to")
attr(:replace, :boolean, default: true, doc: "Whether to replace the current item in the history")
attr(:rest, :global)
slot(:icon_left, doc: "Icon displayed on the left of an item")
slot(:icon_right, doc: "Icon displayed on the right of an item")
def tab_menu_horizontal_item(assigns) do
~H"""
<%= if @patch || @navigate || @href do %>
<.link
class="noora-tab-menu-horizontal-item"
patch={@patch}
replace={@replace}
navigate={@navigate}
href={@href}
data-selected={@selected}
{@rest}
>
<%= if has_slot_content?(@icon_left, assigns) do %>
<div data-part="icon-left">
{render_slot(@icon_left)}
</div>
<% end %>
<span data-part="label">{@label}</span>
<%= if has_slot_content?(@icon_right, assigns) do %>
<div data-part="icon-right">
{render_slot(@icon_right)}
</div>
<% end %>
</.link>
<% else %>
<div class="noora-tab-menu-horizontal-item" data-selected={@selected} {@rest}>
<%= if has_slot_content?(@icon_left, assigns) do %>
<div data-part="icon-left">
{render_slot(@icon_left)}
</div>
<% end %>
<span data-part="label">{@label}</span>
<%= if has_slot_content?(@icon_right, assigns) do %>
<div data-part="icon-right">
{render_slot(@icon_right)}
</div>
<% end %>
</div>
<% end %>
"""
end
end