Tabbed Interface

Multi-tab interface pattern with automatic routing, state management, and DaisyUI styling

Tab Definition

The Tab class defines a single tab in a tabbed interface. Each tab has: - Unique identifier - Display label - Optional title (tooltip on hover) - Render function that generates the UI - Optional data loader for fetching required data

---

source

Tab

def Tab(
    id:str, label:str, render:Callable, title:Optional=None, data_loader:Optional=None, load_on_demand:bool=True
)->None:

Definition of a single tab in a tabbed interface.

TabbedInterface Class

The TabbedInterface class manages a multi-tab interface. It: - Renders tab navigation using DaisyUI radio-based tabs - Manages tab content loading via HTMX - Supports direct navigation to specific tabs via URL - Generates routes automatically - Supports different tab styles (lift, bordered, boxed)

---

source

TabbedInterface

def TabbedInterface(
    interface_id:str, # Unique identifier for this interface
    tabs_list:List, # List of tab definitions
    default_tab:Optional=None, # Default tab ID (defaults to first tab)
    container_id:str='tabbed-interface-container', # HTML ID for container
    tabs_id:str='tabbed-interface-tabs', # HTML ID for tabs element
    content_id:str='tabbed-interface-content', # HTML ID for content area
    tab_style:Optional=None, # DaisyUI tab style (lift, bordered, boxed)
    show_on_htmx_only:bool=False, # Whether to show full page layout for non-HTMX requests
):

Manage multi-tab interfaces with automatic route generation and HTMX content loading.

Tab Management Methods

---

source

TabbedInterface.get_tab

def get_tab(
    tab_id:str, # Tab identifier
)->Optional: # Tab object or None

Get tab by ID.

---

source

TabbedInterface.get_tab_index

def get_tab_index(
    tab_id:str, # Tab identifier
)->Optional: # Tab index or None

Get tab index by ID.

Context and Rendering Methods

---

source

TabbedInterface.create_context

def create_context(
    request:Any, # FastHTML request object
    sess:Any, # FastHTML session object
    tab:Tab, # Current tab
)->InteractionContext: # Interaction context for rendering

Create interaction context for a tab.

---

source

TabbedInterface.render_tabs

def render_tabs(
    current_tab_id:str, # Currently active tab ID
    tab_route_func:Callable, # Function to generate tab route
)->FT: # Tab navigation element

Render tab navigation using DaisyUI radio-based tabs.

---

source

TabbedInterface.render_tab_content

def render_tab_content(
    tab_obj:Tab, # Tab to render
    ctx:InteractionContext, # Interaction context
)->FT: # Tab content

Render tab content.

---

source

TabbedInterface.render_full_interface

def render_full_interface(
    current_tab_id:str, # Currently active tab ID
    tab_route_func:Callable, # Function to generate tab route
    request:Any, # FastHTML request object
    sess:Any, # FastHTML session object
)->FT: # Complete tabbed interface

Render complete tabbed interface with tabs and content area.

Route Generation

---

source

TabbedInterface.create_router

def create_router(
    prefix:str='', # URL prefix for routes (e.g., "/dashboard")
)->APIRouter: # APIRouter with generated routes

Create FastHTML router with generated routes for this tabbed interface.

Usage Example

Here’s a complete example showing how to create a tabbed interface:

# Example: Simple 3-tab dashboard
from fasthtml.common import Div, H2, P, H3, Ul, Li

# Define render functions for each tab
def render_overview(ctx: InteractionContext):
    """Render overview tab."""
    stats = ctx.get_data("stats", {})
    return Div(
        H2("Overview"),
        P(f"Total items: {stats.get('total', 0)}"),
        P(f"Active items: {stats.get('active', 0)}")
    )

def render_settings(ctx: InteractionContext):
    """Render settings tab."""
    return Div(
        H2("Settings"),
        H3("Configuration Options"),
        Ul(
            Li("Theme: Dark"),
            Li("Language: English"),
            Li("Notifications: Enabled")
        )
    )

def render_help(ctx: InteractionContext):
    """Render help tab."""
    return Div(
        H2("Help"),
        P("Welcome to the help section."),
        P("Find documentation and guides here.")
    )

# Optional data loader for overview tab
def load_overview_data(request):
    """Load statistics for overview tab."""
    return {
        "stats": {
            "total": 42,
            "active": 15
        }
    }

# Create the tabbed interface with lift style
dashboard_tabs = TabbedInterface(
    interface_id="dashboard",
    tabs_list=[
        Tab(
            id="overview",
            label="Overview",
            title="Dashboard Overview",
            render=render_overview,
            data_loader=load_overview_data
        ),
        Tab(
            id="settings",
            label="Settings",
            title="Configuration Settings",
            render=render_settings
        ),
        Tab(
            id="help",
            label="Help",
            title="Help & Documentation",
            render=render_help
        )
    ],
    tab_style="lift"  # Use DaisyUI lift style
)

# Generate router
dashboard_router = dashboard_tabs.create_router(prefix="/dashboard")

# In your FastHTML app, register the router:
# from cjm_fasthtml_app_core.core.routing import register_routes
# register_routes(app, dashboard_router)
#
# Or directly:
# dashboard_router.to_app(app)

# Test tabbed interface structure
print(f"Interface has {len(dashboard_tabs.tabs_list)} tabs")
print(f"Default tab: {dashboard_tabs.default_tab}")
print(f"Tab IDs: {list(dashboard_tabs.tab_index.keys())}")
print(f"Tab style: {dashboard_tabs.tab_style}")

Interface has 3 tabs
Default tab: overview
Tab IDs: ['overview', 'settings', 'help']
Tab style: lift