ui.tabs

Tabs

Switch between panels without a round trip — with icons, sizes, colours, the active tab in the URL, or a handler in Python.

Settings sections

ui.tab declares the strip, ui.tab_panel the content. Switching is instant: it never calls the server.

Full name

Job title

Weekly digest

Mentions and replies

Product announcements

Team plan · 12 seatsNext invoice: €240.00 on 1 October

def settings() -> None:
    with ui.tabs(value="profile", name="settings", classes="w-full"):
        ui.tab("profile", label="Profile", icon="user")
        ui.tab("notifications", label="Notifications", icon="bell")
        ui.tab("billing", label="Billing", icon="credit-card")
        with ui.tab_panel("profile"), ui.vstack(gap="md", classes="max-w-md pt-2"):
            with ui.form_field(label="Full name"):
                ui.input(value="Ada Lovelace", name="full_name")
            with ui.form_field(label="Job title"):
                ui.input(value="Head of Analytics", name="job_title")
        with ui.tab_panel("notifications"), ui.vstack(gap="sm", classes="pt-2"):
            ui.switch(label="Weekly digest", checked=True, name="digest")
            ui.switch(label="Mentions and replies", checked=True, name="mentions")
            ui.switch(label="Product announcements", name="announcements")
        with ui.tab_panel("billing"), ui.vstack(gap="xs", classes="pt-2"):
            ui.text("Team plan · 12 seats", weight="medium")
            ui.text("Next invoice: €240.00 on 1 October", color="muted")

Sizes

def sizes() -> None:
    with ui.vstack(gap="lg", classes="w-full"):
        for size in ("sm", "md", "lg"):
            with ui.tabs(value="overview", size=size, name=f"size-{size}"):
                ui.tab("overview", label="Overview")
                ui.tab("activity", label="Activity")
                ui.tab("members", label="Members")

Colours and a disabled tab

def colors() -> None:
    with ui.vstack(gap="lg", classes="w-full"):
        for color in ("primary", "secondary", "success"):
            with ui.tabs(value="open", color=color, name=f"color-{color}"):
                ui.tab("open", label="Open · 24")
                ui.tab("closed", label="Closed · 318")
                ui.tab("archived", label="Archived", disabled=True)

The active tab in the URL

url="tab" writes ?tab=activity into the address bar, so a link or a reload lands on the same tab.

Website redesign · 68 % done · due 14 November

def linkable() -> None:
    with ui.tabs(value="overview", url="tab", name="project", classes="w-full"):
        ui.tab("overview", label="Overview", icon="layout-dashboard")
        ui.tab("activity", label="Activity", icon="activity")
        with ui.tab_panel("overview"):
            ui.text("Website redesign · 68 % done · due 14 November", color="muted")
        with ui.tab_panel("activity"):
            ui.text("Grace moved “Hero illustration” to Review, 5 minutes ago.",
                    color="muted")

A tab change that runs Python

Bound to a server state, on_change receives the new tab and the figures below re-render for that period.

€48.2k

+12.4 %184 invoices

def figures(period: str) -> tuple[str, str, str]:
    return {
        "week": ("€12.4k", "+4.1 %", "38 invoices"),
        "month": ("€48.2k", "+12.4 %", "184 invoices"),
        "quarter": ("€139.7k", "+9.8 %", "521 invoices"),
    }[period]


class Report(PageState):
    period: str = field(default="month")


def show_period(period: str) -> None:
    Report().period = period


@refreshable(deps=[Report])
def revenue() -> None:
    total, delta, count = figures(str(Report().period))
    with ui.hstack(gap="md", align="end"):
        ui.heading(total, level=3, size="3xl")
        ui.badge(delta, color="success", variant="soft")
        ui.text(count, color="muted")


def server_tabs() -> None:
    with ui.vstack(gap="md", classes="w-full"):
        with ui.tabs(value=Report().period, on_change=show_period):
            ui.tab("week", label="This week")
            ui.tab("month", label="This month")
            ui.tab("quarter", label="This quarter")
        revenue()