ui.viewport

Viewport & pane

A screen that never scrolls as a whole: the navigation stays put, and each region scrolls on its own.

An app shell

ui.viewport freezes the window; ui.pane is the region that scrolls. Scroll the activity: the sidebar does not move. In an app the viewport IS the window — here classes="absolute!" pins it inside the box.

Activity

Grace Hopper merged pull request #4822 min ago

Alan Turing commented on Billing export9 min ago

Ada Lovelace closed issue #120724 min ago

Katherine Johnson deployed v2.14 to production1 h ago

Linus Pauling opened Faster invoice search2 h ago

Hedy Lamarr invited 3 people to Nimbus3 h ago

Grace Hopper renamed Q3 roadmap5 h ago

Alan Turing archived Legacy importerYesterday

Ada Lovelace uploaded brand-kit.zipYesterday

Katherine Johnson resolved 12 alerts2 days ago

def activity() -> list[tuple[str, str, str]]:
    return [
        ("Grace Hopper", "merged pull request #482", "2 min ago"),
        ("Alan Turing", "commented on Billing export", "9 min ago"),
        ("Ada Lovelace", "closed issue #1207", "24 min ago"),
        ("Katherine Johnson", "deployed v2.14 to production", "1 h ago"),
        ("Linus Pauling", "opened Faster invoice search", "2 h ago"),
        ("Hedy Lamarr", "invited 3 people to Nimbus", "3 h ago"),
        ("Grace Hopper", "renamed Q3 roadmap", "5 h ago"),
        ("Alan Turing", "archived Legacy importer", "Yesterday"),
        ("Ada Lovelace", "uploaded brand-kit.zip", "Yesterday"),
        ("Katherine Johnson", "resolved 12 alerts", "2 days ago"),
    ]


def app_shell() -> None:
    with (
        ui.vstack(gap="none", classes="relative h-[26rem] w-full overflow-hidden "
                                      "rounded-box border border-text/10"),
        ui.viewport(classes="absolute!"),
    ):
        with ui.sidebar(collapsible="none", width="sm", slots={"root": "h-full!"}):
            ui.sidebar_title("Nimbus", icon=ui.icon("cloud", color="primary", size="lg"))
            with ui.sidebar_section():
                ui.sidebar_item("Activity", icon="activity", active=True)
                ui.sidebar_item("Projects", icon="folder-kanban")
                ui.sidebar_item("Team", icon="users")
        with ui.pane(padding="lg", gap="sm"):
            ui.heading("Activity", level=3, size="xl")
            for who, what, when in activity():
                with ui.card(padding="sm"), ui.hstack(gap="sm"):
                    ui.avatar(name=who, size="sm", color="secondary")
                    with ui.vstack(gap="none", classes="min-w-0"):
                        ui.text(f"{who} {what}", size="sm", truncate=True)
                        ui.text(when, size="xs", color="muted")

Two regions, two scrollbars

A list and a conversation, each in its own pane. grow="equal" shares the width between them.

Conversations

Grace Hoppermerged pull request #482

Alan Turingcommented on Billing export

Ada Lovelaceclosed issue #1207

Katherine Johnsondeployed v2.14 to production

Linus Paulingopened Faster invoice search

Hedy Lamarrinvited 3 people to Nimbus

Grace Hopperrenamed Q3 roadmap

Alan Turingarchived Legacy importer

Ada Lovelaceuploaded brand-kit.zip

Katherine Johnsonresolved 12 alerts

Grace HopperThe pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.The pull request is merged. Staging picks it up on the next deploy; ping me if the export still times out on the larger workspaces.

def activity() -> list[tuple[str, str, str]]:
    return [
        ("Grace Hopper", "merged pull request #482", "2 min ago"),
        ("Alan Turing", "commented on Billing export", "9 min ago"),
        ("Ada Lovelace", "closed issue #1207", "24 min ago"),
        ("Katherine Johnson", "deployed v2.14 to production", "1 h ago"),
        ("Linus Pauling", "opened Faster invoice search", "2 h ago"),
        ("Hedy Lamarr", "invited 3 people to Nimbus", "3 h ago"),
        ("Grace Hopper", "renamed Q3 roadmap", "5 h ago"),
        ("Alan Turing", "archived Legacy importer", "Yesterday"),
        ("Ada Lovelace", "uploaded brand-kit.zip", "Yesterday"),
        ("Katherine Johnson", "resolved 12 alerts", "2 days ago"),
    ]


def master_detail() -> None:
    with (
        ui.vstack(gap="none", classes="relative h-[24rem] w-full overflow-hidden "
                                      "rounded-box border border-text/10"),
        ui.viewport(classes="absolute!", grow="equal"),
    ):
        with ui.pane(padding="md", gap="sm"):
            ui.text("Conversations", weight="semibold")
            for who, what, _ in activity():
                with ui.card(padding="sm"), ui.vstack(gap="none"):
                    ui.text(who, weight="medium", size="sm")
                    ui.text(what, color="muted", size="sm", truncate=True)
        with ui.pane(padding="md", gap="md"):
            ui.text("Grace Hopper", weight="semibold")
            for _ in range(8):
                ui.text("The pull request is merged. Staging picks it up on "
                        "the next deploy; ping me if the export still times "
                        "out on the larger workspaces.", color="muted", size="sm")

A mobile shell

direction="col" stacks a top bar, the pane and a bottom bar: both bars stay put while the feed scrolls between them.