tabs widget (#2020)

* tabs widget

* click underline

* color tweak

* docs

* docs update

* expose Tab

* added remove_tab and clear

* fix cycling

* add animation

* docs

* changelog

* remove recompose

* docstrings

* Update docs/guide/actions.md

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Rodrigoed the tabs

* Update docs/widgets/tabs.md

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Update docs/widgets/tabs.md

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* copy

* docstrings

* docstring

* docstring

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* stop click

* docstring

* auto assign consistent IDs

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Document bindings

* document bindings

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

---------

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

docs/examples/guide/actions/actions02.py

@@ -1,5 +1,5 @@
-from textual.app import App
 from textual import events
+from textual.app import App
 
 
 class ActionsApp(App):
@@ -8,7 +8,7 @@ class ActionsApp(App):
 
     async def on_key(self, event: events.Key) -> None:
         if event.key == "r":
-            await self.action("set_background('red')")
+            await self.run_action("set_background('red')")
 
 
 if __name__ == "__main__":

docs/examples/widgets/tabs.py

@@ -0,0 +1,82 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Footer, Label, Tabs
+
+NAMES = [
+    "Paul Atreidies",
+    "Duke Leto Atreides",
+    "Lady Jessica",
+    "Gurney Halleck",
+    "Baron Vladimir Harkonnen",
+    "Glossu Rabban",
+    "Chani",
+    "Silgar",
+]
+
+
+class TabsApp(App):
+    """Demonstrates the Tabs widget."""
+
+    CSS = """
+    Tabs {
+        dock: top;
+    }
+    Screen {
+        align: center middle;
+    }
+    Label {
+        margin:1 1;
+        width: 100%;
+        height: 100%;
+        background: $panel;
+        border: tall $primary;
+        content-align: center middle;
+    }
+    """
+
+    BINDINGS = [
+        ("a", "add", "Add tab"),
+        ("r", "remove", "Remove active tab"),
+        ("c", "clear", "Clear tabs"),
+    ]
+
+    def compose(self) -> ComposeResult:
+        yield Tabs(NAMES[0])
+        yield Label()
+        yield Footer()
+
+    def on_mount(self) -> None:
+        """Focus the tabs when the app starts."""
+        self.query_one(Tabs).focus()
+
+    def on_tabs_tab_activated(self, event: Tabs.TabActivated) -> None:
+        """Handle TabActivated message sent by Tabs."""
+        label = self.query_one(Label)
+        if event.tab is None:
+            # When the tabs are cleared, event.tab will be None
+            label.visible = False
+        else:
+            label.visible = True
+            label.update(event.tab.label)
+
+    def action_add(self) -> None:
+        """Add a new tab."""
+        tabs = self.query_one(Tabs)
+        # Cycle the names
+        NAMES[:] = [*NAMES[1:], NAMES[0]]
+        tabs.add_tab(NAMES[0])
+
+    def action_remove(self) -> None:
+        """Remove active tab."""
+        tabs = self.query_one(Tabs)
+        active_tab = tabs.active_tab
+        if active_tab is not None:
+            tabs.remove_tab(active_tab.id)
+
+    def action_clear(self) -> None:
+        """Clear the tabs."""
+        self.query_one(Tabs).clear()
+
+
+if __name__ == "__main__":
+    app = TabsApp()
+    app.run()