Raxol.UI.Components.TabBar (Raxol v0.5.0)

View Source

A 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

render(tabs, active_tab, on_change, opts \\ [])

tabbed_view(tabs, active_tab, on_change, opts \\ [])

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 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 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
)