updated list view

docs/blog/posts/release0-6-0.md

@@ -55,8 +55,22 @@ The Tree control forms the foundation of the [DirectoryTree](../../widgets/direc
 
 We have a new list view control to navigate and select items in a list. Items can be widgets themselves, which makes this a great platform for building more sophisticated controls.
 
-```{.textual path="docs/examples/widgets/list_view.py"}
-```
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/list_view.py"}
+    ```
+
+=== "list_view.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/list_view.py"
+    ```
+
+=== "list_view.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/list_view.css"
+    ```
 
 ## Placeholder
 

docs/examples/widgets/list_view.py

@@ -3,6 +3,9 @@ from textual.widgets import ListView, ListItem, Label, Footer
 
 
 class ListViewExample(App):
+
+    CSS_PATH = "list_view.css"
+
     def compose(self) -> ComposeResult:
         yield ListView(
             ListItem(Label("One")),
@@ -12,6 +15,6 @@ class ListViewExample(App):
         yield Footer()
 
 
-app = ListViewExample(css_path="list_view.css")
 if __name__ == "__main__":
+    app = ListViewExample()
     app.run()

docs/widgets/list_view.md

@@ -21,10 +21,16 @@ The example below shows an app with a simple `ListView`.
     --8<-- "docs/examples/widgets/list_view.py"
     ```
 
+=== "list_view.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/list_view.css"
+    ```
+
 ## Reactive Attributes
 
 | Name    | Type  | Default | Description                     |
-|---------|-------|---------|---------------------------------|
+| ------- | ----- | ------- | ------------------------------- |
 | `index` | `int` | `0`     | The currently highlighted index |
 
 ## Messages
@@ -40,7 +46,7 @@ click on a list item.
 #### Attributes
 
 | attribute | type       | purpose                        |
-|-----------|------------|--------------------------------|
+| --------- | ---------- | ------------------------------ |
 | `item`    | `ListItem` | The item that was highlighted. |
 
 ### Selected
@@ -54,7 +60,7 @@ or by clicking on it.
 #### Attributes
 
 | attribute | type       | purpose                     |
-|-----------|------------|-----------------------------|
+| --------- | ---------- | --------------------------- |
 | `item`    | `ListItem` | The item that was selected. |
 
 
@@ -68,7 +74,7 @@ are changed (e.g. a child is added, or the list is cleared).
 #### Attributes
 
 | attribute  | type             | purpose                   |
-|------------|------------------|---------------------------|
+| ---------- | ---------------- | ------------------------- |
 | `children` | `list[ListItem]` | The new ListView children |