Merge pull request #5893 from Textualize/containers-howto

Containers howto

Author: willmcgugan

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")  # (1)!
+        with Center(classes="with-border"):  # (2)!
+            yield Box("Box 2")
+        with Right(classes="with-border"):  # (3)!
+            yield Box("Box 3")
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()

docs/examples/how-to/containers09.py

@@ -0,0 +1,35 @@
+from textual.app import App, ComposeResult
+from textual.containers import 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 Middle(classes="with-border"):  # (1)!
+            yield Box("Box 1.")
+            yield Box("Box 2.")
+            yield Box("Box 3.")
+
+
+if __name__ == "__main__":
+    app = ContainerApp()
+    app.run()