Raxol.UI.Components.TabBar (Raxol v0.5.0)
View SourceA tab bar component for Raxol.
A tab bar component for navigating between different sections of a UI.
Examples
alias Raxol.UI.Components.TabBar
# In your view function
def view(model) do
tabs = [
%{id: :dashboard, label: "Dashboard"},
%{id: :settings, label: "Settings"},
%{id: :help, label: "Help"}
]
view do
panel do
TabBar.render(tabs, model.active_tab, &handle_tab_change/2)
# Content based on active tab
case model.active_tab do
:dashboard -> dashboard_view(model)
:settings -> settings_view(model)
:help -> help_view(model)
end
end
end
end
# Handler function
def handle_tab_change(model, tab_id) do
%{model | active_tab: tab_id}
end
@behaviour Raxol.ComponentBehaviour
@doc """
Renders a tab bar with the given tabs, highlighting the active tab.
## Parameters
* `tabs` - A list of tab maps, each containing `:id` and `:label` keys
* `active_tab` - The ID of the currently active tab
* `on_change` - A function that takes the model and a tab ID and returns an updated model
* `opts` - Options for customizing the tab bar appearance
## Options
* `:focus_key` - Key for focusing the tab bar (default: "tab_bar")
* `:style` - Style for the tab bar (default: %{})
* `:tab_style` - Style for individual tabs (default: %{})
* `:active_tab_style` - Style for the active tab (default: %{fg: :white, bg: :blue})
## Returns
A view element representing the tab bar.
## Example
TabBar.render( [
%{id: :tab1, label: "First Tab"},
%{id: :tab2, label: "Second Tab"}
], :tab1, &handle_tab_change/2, active_tab_style: %{fg: :white, bg: :green} )
Summary
Functions
Creates a tabbed interface with content.
Functions
Creates a tabbed interface with content.
This is a higher-level component that combines the tab bar with content areas for each tab.
Parameters
tabs
- A list of tab maps, each containing:id
,:label
, and:content
keysactive_tab
- The ID of the currently active tabon_change
- A function that takes the model and a tab ID and returns an updated modelopts
- Options for customizing the tabbed interface
Options
:focus_key
- Key for focusing the tabbed interface (default: "tabbed_view"):style
- Style for the container (default: %{}):tab_bar_style
- Style for the tab bar (default: %{}):tab_style
- Style for individual tabs (default: %{}):active_tab_style
- Style for the active tab (default: %{fg: :white, bg: :blue}):content_style
- Style for the content area (default: %{})
Returns
A view element representing the complete tabbed interface.
Example
TabBar.tabbed_view(
[
%{id: :tab1, label: "First Tab", content: fn -> View.text("First tab content") end},
%{id: :tab2, label: "Second Tab", content: fn -> View.text("Second tab content") end}
],
:tab1,
&handle_tab_change/2
)