How would I control TabbedContent to make a workflow modal?

[iiian]

I'm trying to guide users through a series of data entry prompts. I'd like to do it with a TabbedContent view, but I'd like to control it so that the tabs aren't clickable; they just show what step you're on, and a pair of previous/next buttons direct flow. Is this possible out of the box?

[edward-jazzhands]

Yes it is certainly possible out of the box. You simply have to set the disabled attribute to True on the TabbedContent widget. That will prevent any kind of interaction with it from the user - focusing, clicking, keyboard, etc. However it will still be possible to change it programmatically. Futhermore, although the disabled mode will dim the tabs by default, in your case you probably don't want that. So the easiest solution is to just override the CSS in disabled mode back to what it would normally be.

I wrote up an example app to demonstrate. You can try this out and see that the tabs cannot be changed in the normal ways. But if you press your 'enter' key then it will rotate through the tabs as an example of how it can still be set with python.

from textual.app import App, ComposeResult
from textual.widgets import Placeholder, Footer, TabbedContent, TabPane
from textual.containers import Container

class TextualApp(App[None]):    

    # The CSS Below would be the normal CSS for Tabs when they're not disabled
    CSS = """
    Tabs {
        &:disabled {
            .underline--bar {
                background: $foreground 30%;
            }
            & .-active {
                color: $block-cursor-foreground;
                background: $block-cursor-background;
            }
        }
    }    
    """

    BINDINGS = [
        ("enter", "next_tab", "Next Tab"),
    ]

    current_tab = 1

    def compose(self) -> ComposeResult:
        with Container(id="main_container"):
            with TabbedContent() as TC:
                TC.disabled = True
                with TabPane("Tab 1", id="tab1"):
                    yield Placeholder("Placeholder for Tab 1")
                with TabPane("Tab 2", id="tab2"):
                    yield Placeholder("Placeholder for Tab 2")
                with TabPane("Tab 3", id="tab3"):
                    yield Placeholder("Placeholder for Tab 3")
        yield Footer()

    def action_next_tab(self) -> None:
        next_tab = (self.current_tab + 1) if self.current_tab < 3 else 1
        self.current_tab = next_tab
        self.query_one(TabbedContent).active = f"tab{next_tab}"

TextualApp().run()