mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
60 lines
1.6 KiB
Markdown
60 lines
1.6 KiB
Markdown
# Layers
|
|
|
|
The `layers` property allows you to define an ordered set of layers.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
layers: <a href="../../css_types/name"><name></a>+;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The `layers` rule accepts one or more [`<name>`](../../css_types/name) that define the layers that the widget is aware of, and the order in which they will be painted on the screen.
|
|
|
|
The values used here can later be referenced using the [`layer`](../layer) property.
|
|
The layers defined first in the list are drawn under the layers that are defined later in the list.
|
|
|
|
More information on layers can be found in the [guide](../guide/layout.md#layers).
|
|
|
|
## 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 'layer.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 14 19"
|
|
--8<-- "docs/examples/guide/layout/layers.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Bottom layer is called 'below', layer above it is called 'above' */
|
|
layers: below above;
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# Bottom layer is called 'below', layer above it is called 'above'
|
|
widget.style.layers = ("below", "above")
|
|
```
|
|
|
|
## See also
|
|
|
|
- The [layout guide](../guide/layout.md#layers) section on layers.
|
|
- [`layer`](./layer.md) to set the layer a widget belongs to.
|