mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Add example to dock reference.
This commit is contained in:
@@ -5,10 +5,10 @@ The `dock` property is used to fix a widget to the edge of a container (which ma
|
|||||||
## Syntax
|
## Syntax
|
||||||
|
|
||||||
```
|
```
|
||||||
dock: top|right|bottom|left;
|
dock: top | right | bottom | left;
|
||||||
```
|
```
|
||||||
|
|
||||||
## Example
|
## Examples
|
||||||
|
|
||||||
The example below shows a `left` docked sidebar.
|
The example below shows a `left` docked sidebar.
|
||||||
Notice that even though the content is scrolled, the sidebar remains fixed.
|
Notice that even though the content is scrolled, the sidebar remains fixed.
|
||||||
@@ -30,6 +30,26 @@ Notice that even though the content is scrolled, the sidebar remains fixed.
|
|||||||
--8<-- "docs/examples/guide/layout/dock_layout1_sidebar.css"
|
--8<-- "docs/examples/guide/layout/dock_layout1_sidebar.css"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
The second example shows how one can use full-width or full-height containers to dock labels to the edges of a larger container.
|
||||||
|
The labels will remain in that position (docked) even if the container they are in scrolls horizontally and/or vertically.
|
||||||
|
|
||||||
|
=== "Output"
|
||||||
|
|
||||||
|
```{.textual path="docs/examples/styles/dock_all.py"}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "dock_all.py"
|
||||||
|
|
||||||
|
```py
|
||||||
|
--8<-- "docs/examples/styles/dock_all.py"
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "dock_all.css"
|
||||||
|
|
||||||
|
```css hl_lines="2-5 8-11 14-17 20-23"
|
||||||
|
--8<-- "docs/examples/styles/dock_all.css"
|
||||||
|
```
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
|
|
||||||
```sass
|
```sass
|
||||||
|
|||||||
Reference in New Issue
Block a user