Sample code for the article on Textual

Author: lpozo

python-textual/README.md

@@ -0,0 +1,3 @@
+# Python Textual: Build Beautiful UIs in the Terminal
+
+This folder provides the code examples for the Real Python tutorial [Python Textual: Build Beautiful UIs in the Terminal](https://realpython.com/python-textual/).

python-textual/buttons_and_inputs.py

@@ -0,0 +1,23 @@
+from textual.app import App
+from textual.widgets import Button, Input
+
+class ButtonsAndInputsApp(App):
+    def compose(self):
+        # Buttons
+        yield Button("Click me!")
+        yield Button("Primary!", variant="primary")
+        yield Button.success("Success!")
+        yield Button.warning("Warning!")
+        yield Button.error("Error!")
+        # Inputs
+        yield Input(placeholder="Type your text here")
+        yield Input(placeholder="Password", password=True)
+        yield Input(
+            placeholder="Type a number here",
+            type="number",
+            tooltip="Digits only please!",
+        )
+
+if __name__ == "__main__":
+    app = ButtonsAndInputsApp()
+    app.run()

python-textual/events.py

@@ -0,0 +1,47 @@
+# from textual import on
+from textual.app import App
+from textual.widgets import Button, Digits, Footer
+
+class EventsApp(App):
+    CSS_PATH = "events.tcss"
+    BINDINGS = [
+        ("q", "quit", "Quit"),
+        ("b", "toggle_border", "Toggle border"),
+    ]
+
+    presses_count = 0
+    double_border = False
+
+    def compose(self):
+        yield Button(
+            "Click me!",
+            id="button",
+        )
+        digits = Digits("0", id="digits")
+        digits.border_subtitle = "Button presses"
+        yield digits
+        yield Footer()
+
+    def action_toggle_border(self):
+        self.double_border = not self.double_border
+        digits = self.query_one("#digits")
+        if self.double_border:
+            digits.styles.border = ("double", "yellow")
+        else:
+            digits.styles.border = ("solid", "white")
+
+    def on_button_pressed(self, event):
+        if event.button.id == "button":
+            self.presses_count += 1
+            digits = self.query_one("#digits")
+            digits.update(f"{self.presses_count}")
+
+    # @on(Button.Pressed, "#button")
+    # def button_pressed(self, event):
+    #     self.presses_count += 1
+    #     digits = self.query_one("#digits")
+    #     digits.update(f"{self.presses_count}")
+
+if __name__ == "__main__":
+    app = EventsApp()
+    app.run()

python-textual/events.tcss

@@ -0,0 +1,16 @@
+Button {
+    background: $secondary;
+    border: solid $primary;
+    margin: 2 2;
+}
+
+Button:hover {
+    border: round white;
+}
+
+#digits {
+    color: green;
+    border: solid white;
+    padding: 1;
+    width: 30;
+}

python-textual/grid.py

@@ -0,0 +1,21 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Static
+
+class GridLayoutExample(App):
+    def compose(self):
+        grid = Grid()
+        grid.styles.grid_size_rows = rows = 6
+        grid.styles.grid_size_columns = cols = 4
+        with grid:
+            for row in range(rows):
+                for col in range(cols):
+                    static = Static(f"Static ({row=}, {col=})")
+                    static.styles.border = ("solid", "green")
+                    static.styles.width = "1fr"
+                    static.styles.height = "1fr"
+                    yield static
+
+if __name__ == "__main__":
+    app = GridLayoutExample()
+    app.run()

python-textual/grid.tcss

@@ -0,0 +1,9 @@
+Grid {
+    grid_size: 4 6;
+}
+
+Static {
+    height: 1fr;
+    width: 1fr;
+    border:  solid green;
+}

python-textual/grid_with_tcss.py

@@ -0,0 +1,16 @@
+from textual.app import App
+from textual.containers import Grid
+from textual.widgets import Static
+
+class GridLayoutWithTCSS(App):
+    CSS_PATH = "grid.tcss"
+
+    def compose(self):
+        with Grid():
+            for row in range(6):
+                for col in range(4):
+                    yield Static(f"Static ({row=}, {col=})")
+
+if __name__ == "__main__":
+    app = GridLayoutWithTCSS()
+    app.run()

python-textual/hello_textual.py

@@ -0,0 +1,10 @@
+from textual.app import App
+from textual.widgets import Static
+
+class HelloTextualApp(App):
+    def compose(self):
+        yield Static("Hello, Textual!")
+
+if __name__ == "__main__":
+    app = HelloTextualApp()
+    app.run()

python-textual/horizontal_layout.py

@@ -0,0 +1,18 @@
+from textual.app import App
+from textual.containers import Horizontal
+from textual.widgets import Static
+
+NUM_BOXES = 4
+
+class HorizontalLayoutExample(App):
+    def compose(self):
+        with Horizontal():
+            for i in range(NUM_BOXES):
+                static = Static(f"Static {i+1}")
+                static.styles.border = ("solid", "green")
+                static.styles.width="10%"
+                yield static
+
+if __name__ == "__main__":
+    app = HorizontalLayoutExample()
+    app.run()

python-textual/horizontal_scroll.py

@@ -0,0 +1,18 @@
+from textual.app import App
+from textual.containers import HorizontalScroll
+from textual.widgets import Static
+
+NUM_BOXES = 20
+
+class HorizontalScrollExample(App):
+    def compose(self):
+        with HorizontalScroll():
+            for i in range(NUM_BOXES):
+                static = Static(f"Static {i+1}")
+                static.styles.border = ("solid", "green")
+                static.styles.width="10%"
+                yield static
+
+if __name__ == "__main__":
+    app = HorizontalScrollExample()
+    app.run()