Skip to content
Elaris.UI Logo Elaris.UI Documentation

Tabs Demo Example

The Tabs Demo shows how to create tabbed interfaces using TabContainer, with multiple tabs containing different content.

What It Demonstrates

Section titled “What It Demonstrates”
  • TabContainer widget
  • Creating and managing tabs
  • Tab content with widgets
  • Tab navigation
  • Tab change events
  • Responsive layout with tabs

Key Features

Section titled “Key Features”

Creating TabContainer

Section titled “Creating TabContainer”
var tabContainer = new TabContainer
{
    BackgroundColor = Color.Black,
    TabBarBackgroundColor = ColorHelper.FromRgb(30, 30, 30),
    ActiveTabBackgroundColor = ColorHelper.FromRgb(0, 120, 212),
    ActiveTabForegroundColor = Color.White
};

Adding Tabs

Section titled “Adding Tabs”
var dashboardTab = tabContainer.AddTab("Dashboard");
dashboardTab.LayoutMode = LayoutMode.Fill;


var actionsTab = tabContainer.AddTab("Quick Actions");
var cleanupTab = tabContainer.AddTab("Cleanup");
var helpTab = tabContainer.AddTab("Help");

Tab Content

Section titled “Tab Content”
var dashboardFrame = new Frame("System Dashboard")
{
    BorderStyle = BorderStyle.Rounded
};


var cpuLabel = new Label("CPU Usage: 42%");
var cpuProgress = new ProgressBar { Value = 42 };


dashboardFrame.Add(cpuLabel);
dashboardFrame.Add(cpuProgress);
dashboardTab.Add(dashboardFrame);

Tab Events

Section titled “Tab Events”
tabContainer.TabChanged += (currentTab, previousTab, currentIndex, previousIndex) =>
{
    statusBar.LeftText = $"Active: {currentTab.Title}";
};

Keyboard Navigation

Section titled “Keyboard Navigation”
  • Left/Right Arrow: Switch between tabs
  • Home: Jump to first tab
  • End: Jump to last tab
  • Tab: Navigate to next tab (when focused)

Running the Example

Section titled “Running the Example”
Terminal window
cd examples/Elaris.Examples.TabsDemo
dotnet run

Learning Points

Section titled “Learning Points”
  • Tabs organize content into separate views
  • Each tab can contain any widgets
  • Tab navigation is keyboard-accessible
  • Tab events enable dynamic content updates
Section titled “Related Widgets”