mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
# Layer
|
|
|
|
The `layer` property defines the layer a widget belongs to.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
layer: <a href="../../css_types/name"><name></a>;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The `layer` rule accepts a [`<name>`](../../css_types/name) that defines the layer this widget belongs to.
|
|
This [`<name>`](../../css_types/name) must correspond to a [`<name>`](../../css_types/name) that has been defined in a [`layers`](./layers) rule by an ancestor of this widget.
|
|
|
|
More information on layers can be found in the [guide](../guide/layout.md#layers).
|
|
|
|
### Values
|
|
|
|
--8<-- "docs/snippets/type_syntax/name.md"
|
|
|
|
!!! warning
|
|
|
|
Using a `<name>` that hasn't been defined in a [`layers`](./layers.md) declaration of an ancestor of this widget has no effect.
|
|
|
|
## 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 14 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.styles.layer = "below"
|
|
```
|