alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Complete references for layer(s).

Browse Source 
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2022-12-20 11:16:55 +00:00
parent 6451d192a6
commit c087c93930
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/styles/layer.md
View File

@@ -1,8 +1,8 @@
# 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.
The value of the `layer` property must be the name of a layer defined using a `layers` declaration.
More information on layers can be found in the [guide](../guide/layout.md#layers).
## Syntax
@@ -31,7 +31,7 @@ However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
=== "layers.css"
```sass hl_lines="3 15 19"
```sass hl_lines="3 14 19"
--8<-- "docs/examples/guide/layout/layers.css"
```
@@ -46,5 +46,5 @@ layer: below;
```python
# Draw the widget on the layer called 'below'
widget.layer = "below"
widget.styles.layer = "below"
```

12
docs/styles/layers.md
View File

@@ -1,16 +1,20 @@
# Layers
The `layers` property allows you to define an ordered set of layers.
These `layers` can later be referenced using the `layer` property.
Layers control the order in which widgets are painted on screen.
These `layers` can later be referenced using the `layer` property.
More information on layers can be found in the [guide](../guide/layout.md#layers).
## Syntax
```
layers: <STRING> ...;
layers: <STRING> . . .;
```
Layers that come first in the list are drawn before the layers that come after.
This means the first layer will be under all other layers and the last layer will be above all other layers.
See the example below.
## Example
In the example below, `#box1` is yielded before `#box2`.
@@ -31,7 +35,7 @@ However, since `#box1` is on the higher layer, it is drawn on top of `#box2`.
=== "layers.css"
```sass hl_lines="3 15 19"
```sass hl_lines="3 14 19"
--8<-- "docs/examples/guide/layout/layers.css"
```
@@ -46,5 +50,5 @@ layers: below above;
```python
# Bottom layer is called 'below', layer above it is called 'above'
widget.layers = ("below", "above")
widget.style.layers = ("below", "above")
```