alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix reference for layout.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-22 14:05:17 +00:00
parent a145210b39
commit 164678ab66
3 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/styles/layout.css
View File

@@ -10,7 +10,7 @@
height: auto; height: auto;
} }
Static { Label {
margin: 1; margin: 1;
width: 12; width: 12;
color: black; color: black;

14
docs/examples/styles/layout.py
View File

@@ -1,20 +1,20 @@
from textual.app import App from textual.app import App
from textual.containers import Container from textual.containers import Container
from textual.widgets import Static from textual.widgets import Label
class LayoutApp(App): class LayoutApp(App):
def compose(self): def compose(self):
yield Container( yield Container(
Static("Layout"), Label("Layout"),
Static("Is"), Label("Is"),
Static("Vertical"), Label("Vertical"),
id="vertical-layout", id="vertical-layout",
) )
yield Container( yield Container(
Static("Layout"), Label("Layout"),
Static("Is"), Label("Is"),
Static("Horizontal"), Label("Horizontal"),
id="horizontal-layout", id="horizontal-layout",
) )

10
docs/styles/layout.md
View File

@@ -2,13 +2,13 @@
The `layout` property defines how a widget arranges its children. The `layout` property defines how a widget arranges its children.
See the [layout](../guide/layout.md) guide for more information.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
layout: grid | horizontal | vertical; layout: grid | horizontal | vertical;
``` --8<-- "docs/snippets/syntax_block_end.md"
The `layout` style takes an option that defines how child widgets will be arranged, as per the table shown below.
### Values ### Values
@@ -18,6 +18,8 @@ layout: grid | horizontal | vertical;
| `horizontal` | Child widgets will be arranged along the horizontal axis, from left to right. | | `horizontal` | Child widgets will be arranged along the horizontal axis, from left to right. |
| `vertical` (default) | Child widgets will be arranged along the vertical axis, from top to bottom. | | `vertical` (default) | Child widgets will be arranged along the vertical axis, from top to bottom. |
See the [layout](../guide/layout.md) guide for more information.
## Example ## Example
Note how the `layout` property affects the arrangement of widgets in the example below. Note how the `layout` property affects the arrangement of widgets in the example below.