more introduction docs

docs/examples/introduction/stopwatch02.py

@@ -28,6 +28,6 @@ class StopwatchApp(App):
         self.dark = not self.dark
 
 
-app = StopwatchApp(css_path="stopwatch02.css")
+app = StopwatchApp()
 if __name__ == "__main__":
     app.run()

docs/examples/introduction/stopwatch03.css

@@ -0,0 +1,30 @@
+Stopwatch {
+    layout: horizontal;
+    background: $panel-darken-1;
+    height: 5;
+    padding: 1;
+    margin: 1;
+}
+
+TimeDisplay {
+    content-align: center middle;
+    opacity: 60%;
+    height: 3;
+}
+
+Button {
+    width: 16;    
+}
+
+#start {
+    dock: left;
+}
+
+#stop {
+    dock: left;
+    display: none;
+}
+
+#reset {
+    dock: right;
+}

docs/examples/introduction/stopwatch03.py

@@ -0,0 +1,33 @@
+from textual.app import App, ComposeResult
+from textual.layout import Container
+from textual.widgets import Button, Header, Footer, Static
+
+
+class TimeDisplay(Static):
+    pass
+
+
+class Stopwatch(Static):
+    def compose(self) -> ComposeResult:
+        yield Button("Start", id="start", variant="success")
+        yield Button("Stop", id="stop", variant="error")
+        yield Button("Reset", id="reset")
+        yield TimeDisplay("00:00:00.00")
+
+
+class StopwatchApp(App):
+    def compose(self):
+        yield Header()
+        yield Footer()
+        yield Container(Stopwatch(), Stopwatch(), Stopwatch())
+
+    def on_load(self):
+        self.bind("d", "toggle_dark", description="Dark mode")
+
+    def action_toggle_dark(self):
+        self.dark = not self.dark
+
+
+app = StopwatchApp(css_path="stopwatch03.css")
+if __name__ == "__main__":
+    app.run()