moar docs

docs/examples/light_dark.py

@@ -17,4 +17,5 @@ class ButtonApp(App):
 
     def handle_pressed(self, event):
         self.dark = not self.dark
+        self.bell()
         event.button.label = "Lights ON" if self.dark else "Lights OFF"

docs/examples/styles/README.md

@@ -0,0 +1,9 @@
+These are the examples from the documentation, used to generate screenshots.
+
+You can run them with the textual CLI.
+
+For example:
+
+```
+textual run text_style.py
+```

docs/examples/styles/border.py

@@ -4,6 +4,9 @@ from textual.widgets import Static
 
 class BorderApp(App):
     CSS = """
+    Screen {
+        background: white;
+    }
     Screen > Static {
         height:5;
         content-align: center middle;
@@ -13,14 +16,18 @@ class BorderApp(App):
     }    
     #static1 {
         background: red 20%;
+        color: red;
         border: solid red;
     }
     #static2 {
         background: green 20%;
+        color: green;
         border: dashed green;
+
     }
     #static3 {
         background: blue 20%;
+        color: blue;
         border: tall blue;
     }
     """

docs/examples/styles/margin.py

@@ -13,9 +13,15 @@ Where the fear has gone there will be nothing. Only I will remain."""
 class MarginApp(App):
     CSS = """
 
+    Screen {
+        background: white;
+        color: black;
+    }
+   
     Static {
         margin: 4 8;  
         background: blue 20%;  
+        border: blue wide;
     }    
     
     """

docs/examples/styles/overflow.py

@@ -0,0 +1,44 @@
+from textual.app import App
+from textual.widgets import Static
+from textual.layout import Horizontal, Vertical
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class OverflowApp(App):
+    CSS = """
+    Screen {
+        background: $background;
+        color: black;
+    }
+   
+    Vertical {
+        width: 1fr;
+    }
+
+    Static {
+        margin: 1 2;  
+        background: blue 20%;  
+        border: blue wide;
+        height: auto;
+    }    
+
+    #right {
+        overflow-y: hidden;
+    }
+    """
+
+    def compose(self):
+        yield Horizontal(
+            Vertical(Static(TEXT), Static(TEXT), Static(TEXT), id="left"),
+            Vertical(Static(TEXT), Static(TEXT), Static(TEXT), id="right"),
+        )
+
+
+app = OverflowApp()

docs/examples/styles/padding.py

@@ -13,6 +13,11 @@ Where the fear has gone there will be nothing. Only I will remain."""
 class PaddingApp(App):
     CSS = """
 
+    Screen {
+        background: white;
+        color: blue;
+    }
+   
     Static {
         padding: 4 8;  
         background: blue 20%;  

docs/styles/max_height.md

@@ -0,0 +1,25 @@
+# Max-height
+
+The `max-height` rule sets a maximum width for a widget.
+
+## CSS
+
+```sass
+
+/* Set a maximum height of 10 rows */
+max-height: 10;
+
+/* Set a maximum height of 25% of the screen height */
+max-height: 25vh;
+```
+
+## Python
+
+```python
+# Set the maximum width to 10 rows
+widget.styles.max_height = 10
+
+# Set the maximum width to 25% of the screen width
+widget.styles.max_height = "25vw"
+
+```

docs/styles/max_width.md

@@ -0,0 +1,25 @@
+# Max-width
+
+The `max-width` rule sets a maximum width for a widget.
+
+## CSS
+
+```sass
+
+/* Set a maximum width of 10 cells */
+max-width: 10;
+
+/* Set a maximum width of 25% of the screen width */
+max-width: 25vh;
+```
+
+## Python
+
+```python
+# Set the maximum width to 10 cells
+widget.styles.max_width = 10
+
+# Set the maximum width to 25% of the screen width
+widget.styles.max_width = "25vw"
+
+```

docs/styles/min_height.md

@@ -0,0 +1,25 @@
+# Min-height
+
+The `min-height` rule sets a minimum height for a widget.
+
+## CSS
+
+```sass
+
+/* Set a minimum height of 10 rows */
+min-height: 10;
+
+/* Set a minimum height of 25% of the screen height */
+min-height: 25vh;
+```
+
+## Python
+
+```python
+# Set the minimum height to 10 rows
+self.styles.min_height = 10
+
+# Set the minimum height to 25% of the screen height
+self.styles.min_height = "25vh"
+
+```

docs/styles/min_width.md

@@ -0,0 +1,25 @@
+# Min-width
+
+The `min-width` rules sets a minimum width for a widget.
+
+## CSS
+
+```sass
+
+/* Set a minimum width of 10 cells */
+min-width: 10;
+
+/* Set a minimum width of 25% of the screen width */
+min-width: 25vh;
+```
+
+## Python
+
+```python
+# Set the minimum width to 10 cells
+widget.styles.min_width = 10
+
+# Set the minimum width to 25% of the screen height
+widget.styles.min_width = "25vh"
+
+```

docs/styles/overflow.md

@@ -0,0 +1,50 @@
+# Overflow
+
+The `overflow` rule specifies if and when scrollbars should be displayed on the `x` and `y` axis. There are two values for each scrollbar, which may be set together or independently to one of the follow three values:
+
+- `"auto"` Automatically show the scrollbar if the content doesn't fit
+- `"hidden"` Never show the scrollbar
+- `"scroll"` Always show the scrollbar
+
+The default is "auto" which will show the scrollbar if content doesn't fit within container, otherwise the scrollbar will be hidden.
+
+## Example
+
+Here we split the screen in to left and right sections, each with three vertically scrolling widgets that do not fit in to the height of the terminal.
+
+The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar. The right side has `overflow-y: hidden` which will prevent a scrollbar from being show.
+
+=== "width.py"
+
+    ```python
+    --8<-- "docs/examples/styles/overflow.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/overflow.py"}
+    ```
+
+## CSS
+
+```sass
+/* Automatic scrollbars on both axies (the default) */
+overflow: auto auto;
+
+/* Hide the vertical scrollbar */
+overflow-y: hidden;
+
+/* Always show the horizontal scrollbar */
+overflow-x: scroll;
+```
+
+## Python
+
+```python
+# Hide the vertical scrollbar
+self.styles.overflow_y = "hidden"
+
+# Always show the horizontal scrollbar
+self.styles.overflow_x = "scroll"
+
+```

mkdocs.yml

@@ -14,8 +14,13 @@ nav:
     - "styles/background.md"
     - "styles/color.md"
     - "styles/display.md"
+    - "styles/min_height.md"
+    - "styles/max_height.md"
+    - "styles/min_width.md"
+    - "styles/max_width.md"
     - "styles/height.md"
     - "styles/margin.md"
+    - "styles/overflow.md"
     - "styles/padding.md"
     - "styles/text_style.md"
     - "styles/visibility.md"