Containers How-to

Author: willmcgugan

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+### Unreleased
+
+## Added
+
+- Added `CenterMiddle` container
+
 ## [3.5.0] - 2025-06-20
 
 ### Changed

docs/examples/how-to/containers01.py

@@ -0,0 +1,29 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    def compose(self) -> ComposeResult:
+        with Horizontal():  # (1)!
+            yield Box()  # (2)!
+            yield Box()
+            yield Box()
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers02.py

@@ -0,0 +1,29 @@
+from textual.app import App, ComposeResult
+from textual.containers import Vertical
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    def compose(self) -> ComposeResult:
+        with Vertical():  # (1)!
+            yield Box()
+            yield Box()
+            yield Box()
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers03.py

@@ -0,0 +1,35 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with Horizontal(classes="with-border"):  # (1)!
+            yield Box()
+            yield Box()
+            yield Box()
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers04.py

@@ -0,0 +1,39 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with Horizontal(classes="with-border"):
+            yield Box()
+            yield Box()
+            yield Box()
+        with Horizontal(classes="with-border"):
+            yield Box()
+            yield Box()
+            yield Box()
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers05.py

@@ -0,0 +1,39 @@
+from textual.app import App, ComposeResult
+from textual.containers import HorizontalGroup
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with HorizontalGroup(classes="with-border"):
+            yield Box()
+            yield Box()
+            yield Box()
+        with HorizontalGroup(classes="with-border"):
+            yield Box()
+            yield Box()
+            yield Box()
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers06.py

@@ -0,0 +1,34 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with Horizontal(classes="with-border"):
+            for n in range(10):
+                yield Box(label=f"Box {n+1}")
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers07.py

@@ -0,0 +1,34 @@
+from textual.app import App, ComposeResult
+from textual.containers import HorizontalScroll
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 8;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with HorizontalScroll(classes="with-border"):
+            for n in range(10):
+                yield Box(label=f"Box {n+1}")
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers08.py

@@ -0,0 +1,36 @@
+from textual.app import App, ComposeResult
+from textual.containers import Center, Right
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 5;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Box("Box 1")
+        with Center(classes="with-border"):
+            yield Box("Box 2")
+        with Right(classes="with-border"):
+            yield Box("Box 3")
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers09.py

@@ -0,0 +1,36 @@
+from textual.app import App, ComposeResult
+from textual.containers import HorizontalGroup, Middle
+from textual.widgets import Placeholder
+
+
+class Box(Placeholder):
+    """Example widget."""
+
+    DEFAULT_CSS = """
+    Box {
+        width: 16;
+        height: 5;        
+    }
+    """
+
+
+class ContainerApp(App):
+    """Simple app to play with containers."""
+
+    CSS = """
+    .with-border {
+        border: heavy green;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        with HorizontalGroup():
+            yield Box("Box 1")
+            with Middle(classes="with-border"):
+                yield Box("Box 2")
+            yield Box("Box 3")
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()