Files
textual/docs/styles/dock.md
darrenburns 9e883d3e45 Document styles (#785)
* Add docs for CSS variables

* Add ref docs for various styles, fix some typos in places
2022-09-15 16:32:23 +01:00

46 lines
903 B
Markdown

# Dock
The `dock` property is used to fix a widget to the edge of a container (which may be the entire terminal window).
## Syntax
```
dock: top|right|bottom|left;
```
## Example
The example below shows a `left` docked sidebar.
Notice that even though the content is scrolled, the sidebar remains fixed.
=== "Output"
```{.textual path="docs/examples/guide/layout/dock_layout1_sidebar.py" press="pagedown,down,down,_,_,_,_,_"}
```
=== "dock_layout1_sidebar.py"
```python
--8<-- "docs/examples/guide/layout/dock_layout1_sidebar.py"
```
=== "dock_layout1_sidebar.css"
```sass hl_lines="2"
--8<-- "docs/examples/guide/layout/dock_layout1_sidebar.css"
```
## CSS
```sass
/* Dock the widget on the left edge of its parent container */
dock: left;
```
## Python
```python
# Dock the widget on the left edge of its parent container
widget.styles.dock = "left"
```