mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Add docs for layout property
This commit is contained in:
52
docs/examples/styles/layout.py
Normal file
52
docs/examples/styles/layout.py
Normal 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
44
docs/styles/layout.md
Normal 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"
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user