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

rename table to gird, diagrams for layout

Browse Source
This commit is contained in:
Will McGugan
2022-09-06 10:16:52 +01:00
parent 6d6e385313
commit e8a4f2e806
17 changed files with 138 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/guide/layout.md
View File

@@ -1,56 +1,76 @@
# Layout
TODO: Explanation of layout
In textual the *layout* defines how widgets will be arranged (or *layed out*) on the screen. Textual supports a number of layouts which can be set either via a widgets `styles` object or via CSS.
## Vertical layout
## Vertical
A vertical layout will place new widgets below previous widgets, starting from the top of the screen.
<div class="excalidraw">
--8<-- "docs/images/layout_vertical.excalidraw.svg"
--8<-- "docs/images/layout/vertical.excalidraw.svg"
</div>
TODO: Explanation of vertical layout
## Horizontal layout
## Horizontal
A horizontal layout will place the first widget at the top left of the screen, and new widgets will be place directly to the right of the previous widget.
<div class="excalidraw">
--8<-- "docs/images/layout_horizontal.excalidraw.svg"
--8<-- "docs/images/layout/horizontal.excalidraw.svg"
</div>
TODO: Explantion of horizontal layout
## Center layout
## Center
A center widget will place the widget directly in the center of the screen. New widgets will also be placed in the center of the screen, overlapping previous widgets.
There probably isn't a practical use for such overlapping widgets. In practice this layout is probably only useful where you have a single child widget.
<div class="excalidraw">
--8<-- "docs/images/layout_center.excalidraw.svg"
--8<-- "docs/images/layout/center.excalidraw.svg"
</div>
TODO: Explanation of center layout
## Table layout
## Grid
A grid layout arranges widgets within a grid composed of columns and rows. Widgets can span multiple rows or columns to create more complex layouts.
<div class="excalidraw">
--8<-- "docs/images/layout_table.excalidraw.svg"
--8<-- "docs/images/layout/grid.excalidraw.svg"
</div>
TODO: Explanation of table layout
TODO: Explanation of grid layout
## Dock
## Docking
Widgets may be *docked*. Docking a widget removes it from the layout and fixes it position, aligned to either the top, right, bottom, or left edges of the screen. Docked widgets will not scroll, making them ideal for fixed headers / footers / sidebars.
<div class="excalidraw">
--8<-- "docs/images/layout/dock.excalidraw.svg"
</div>
TODO: Diagram
TODO: Explanation of dock
## Offsets
Widgets have a relative offset which is added to the widget's location, after its location has been determined via its layout.
<div class="excalidraw">
--8<-- "docs/images/layout/offset.excalidraw.svg"
</div>
TODO: Diagram
TODO: Offsets
## Box Model
TBC