Add docs for layout property

This commit is contained in:
Darren Burns
2022-08-19 14:44:25 +01:00
parent 9eea01f5a1
commit dce81254bf
2 changed files with 96 additions and 0 deletions

View File

@@ -0,0 +1,52 @@
from textual import layout
from textual.app import App
from textual.widget import Widget
from textual.widgets import Static
class LayoutApp(App):
CSS = """
#vertical-layout {
layout: vertical;
background: $panel;
height: auto;
}
#horizontal-layout {
layout: horizontal;
background: $panel-darken-1;
height: auto;
}
#center-layout {
layout: center;
background: $panel-darken-2;
height: 7;
}
Screen Static {
margin: 1;
width: 12;
color: $text-primary;
background: $primary;
}
"""
def compose(self):
yield layout.Container(
Static("Layout"),
Static("Is"),
Static("Vertical"),
id="vertical-layout",
)
yield layout.Container(
Static("Layout"),
Static("Is"),
Static("Horizontal"),
id="horizontal-layout",
)
yield layout.Container(
Static("Center"),
id="center-layout",
)
app = LayoutApp()
app.run()

44
docs/styles/layout.md Normal file
View File

@@ -0,0 +1,44 @@
# Layout
The `layout` property allows you to define how a widget arranges its children.
## Syntax
```
layout: [vertical|horizontal|center];
```
### Values
| Value | Description |
|----------------------|-------------------------------------------------------------------------------|
| `vertical` (default) | Child widgets will be arranged along the vertical axis, from top to bottom. |
| `horizontal` | Child widgets will be arranged along the horizontal axis, from left to right. |
| `center` | A single child widget will be placed in the center. |
## Example
Note how the `layout` property affects the arrangement of widgets in the example below.
=== "layout.py"
```python
--8<-- "docs/examples/styles/layout.py"
```
=== "Output"
```{.textual path="docs/examples/styles/layout.py"}
```
## CSS
```sass
layout: horizontal;
```
## Python
```python
widget.layout = "horizontal"
```