Add example to dock reference.

This commit is contained in:
Rodrigo Girão Serrão
2022-12-15 19:00:16 +00:00
parent 9c10dcf80e
commit 22351a7cfb

View File

@@ -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