mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
51 lines
1.0 KiB
Markdown
51 lines
1.0 KiB
Markdown
# Layer
|
|
|
|
The `layer` property is used to assign widgets to a layer.
|
|
The value of the `layer` property must be the name of a layer defined using a `layers` declaration.
|
|
Layers control the order in which widgets are painted on screen.
|
|
More information on layers can be found in the [guide](../guide/layout.md#layers).
|
|
|
|
## Syntax
|
|
|
|
```
|
|
layer: <STRING>;
|
|
```
|
|
|
|
## Example
|
|
|
|
In the example below, `#box1` is yielded before `#box2`.
|
|
However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
|
|
|
|
[//]: # (NOTE: the example below also appears in the guide and 'layers.md'.)
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/guide/layout/layers.py"}
|
|
```
|
|
|
|
=== "layers.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/guide/layout/layers.py"
|
|
```
|
|
|
|
=== "layers.css"
|
|
|
|
```sass hl_lines="3 15 19"
|
|
--8<-- "docs/examples/guide/layout/layers.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Draw the widget on the layer called 'below' */
|
|
layer: below;
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# Draw the widget on the layer called 'below'
|
|
widget.layer = "below"
|
|
```
|