inline docs

docs/examples/how-to/inline01.py

@@ -0,0 +1,31 @@
+from datetime import datetime
+
+from textual.app import App, ComposeResult
+from textual.widgets import Digits
+
+
+class ClockApp(App):
+    CSS = """
+    Screen {
+        align: center middle;
+    }
+    #clock {
+        width: auto;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Digits("", id="clock")
+
+    def on_ready(self) -> None:
+        self.update_clock()
+        self.set_interval(1, self.update_clock)
+
+    def update_clock(self) -> None:
+        clock = datetime.now().time()
+        self.query_one(Digits).update(f"{clock:%T}")
+
+
+if __name__ == "__main__":
+    app = ClockApp()
+    app.run(inline=True)  #  (1)!

docs/examples/how-to/inline02.py

@@ -0,0 +1,38 @@
+from datetime import datetime
+
+from textual.app import App, ComposeResult
+from textual.widgets import Digits
+
+
+class ClockApp(App):
+    CSS = """
+    Screen {
+        align: center middle;
+        &:inline {
+            border: none;
+            height: 50vh;
+            Digits {
+                color: $success;
+            }
+        }
+    }
+    #clock {
+        width: auto;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Digits("", id="clock")
+
+    def on_ready(self) -> None:
+        self.update_clock()
+        self.set_interval(1, self.update_clock)
+
+    def update_clock(self) -> None:
+        clock = datetime.now().time()
+        self.query_one(Digits).update(f"{clock:%T}")
+
+
+if __name__ == "__main__":
+    app = ClockApp()
+    app.run(inline=True)

docs/examples/widgets/clock.py

@@ -28,4 +28,4 @@ class ClockApp(App):
 
 if __name__ == "__main__":
     app = ClockApp()
-    app.run()
+    app.run(inline=True)

docs/guide/app.md

@@ -47,6 +47,10 @@ Inline apps are useful for tools that integrate closely with the typical workflo
 
 To run an app in inline mode set the `inline` parameter to `True` when you call [App.run()][textual.app.App.run].
 
+!!! tip
+    
+    You can apply [custom styles to inline apps](../how-to/style-inline-apps.md).
+
 ## Events
 
 Textual has an event system you can use to respond to key presses, mouse actions, and internal state changes. Event handlers are methods prefixed with `on_` followed by the name of the event.

docs/how-to/style-inline-apps.md

@@ -0,0 +1,37 @@
+# Style Inline apps
+
+Version 0.55.0 of Textual added support for running apps *inline* (below the prompt).
+Running an inline app is as simple as adding `inline=True` to [`run()`][textual.app.App.run].
+
+<iframe width="100%" style="aspect-ratio:757/804;" src="https://www.youtube.com/embed/dxAf3vDr4aQ" title="Textual Inline mode" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Your apps will typically run inline without modification, but you may want to make some tweaks for inline mode, which you can do with a little CSS.
+This How-To will explain how.
+
+Let's look at an inline app.
+The following app displays the the current time (and keeps it up to date).
+
+```python hl_lines="31"
+--8<-- "docs/examples/how-to/inline01.py"
+```
+
+1. The `inline=True` runs the app inline.
+
+With Textual's default settings, this clock will be displayed in 5 lines; 3 for the digits and 2 for a top and bottom border.
+
+You can change the height or the border with CSS and the `:inline` pseudo-selector, which only matches rules in inline mode.
+Let's update this app to remove the default border, and increase the height:
+
+```python hl_lines="11-17"
+--8<-- "docs/examples/how-to/inline02.py"
+```
+
+The highlighted CSS targets online inline mode.
+By setting the `height` rule on Screen we can define how many lines the app should consume when it runs.
+Setting `border: none` removes the default border when running in inline mode.
+
+We've also added a rule to change the color of the clock when running inline.
+
+## Summary
+
+Most apps will not require modification to run inline, but if you want to tweak the height and border you can write CSS that targets inline mode with the `:inline` pseudo-selector.

mkdocs-nav.yml

@@ -223,6 +223,7 @@ nav:
       - "how-to/design-a-layout.md"
       - "how-to/package-with-hatch.md"
       - "how-to/render-and-compose.md"
+      - "how-to/style-inline-apps.md"
   - "FAQ.md"
   - "roadmap.md"
   - "Blog":