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

Update reference for offset.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-22 18:01:03 +00:00
parent 289ec2556b
commit 9d8e4c53dc
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/styles/offset.md
View File

@@ -1,19 +1,33 @@
# Offset # Offset
The `offset` rule adds an offset to the widget's position. The offset is given as two values. The `offset` rule defines an offset for the position of the widget.
Coordinates may be specified individually with `offset-x` and `offset-y`.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
offset: <SCALAR> <SCALAR>; offset: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
```
offset-x: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
offset-y: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>
--8<-- "docs/snippets/syntax_block_end.md"
The two [`<scalar>`](../css_types/scalar.md) in the `offset` define, respectively, the offsets in the horizontal and vertical axes for the widget.
To specify an offset along a single axis, you can use `offset-x` and `offset-y`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example ## Example
In this example, we have 3 widgets with differing offsets. In this example, we have 3 widgets with differing offsets.
=== "Output"
```{.textual path="docs/examples/styles/offset.py"}
```
=== "offset.py" === "offset.py"
```python ```python
@@ -26,20 +40,23 @@ In this example, we have 3 widgets with differing offsets.
--8<-- "docs/examples/styles/offset.css" --8<-- "docs/examples/styles/offset.css"
``` ```
=== "Output"
```{.textual path="docs/examples/styles/offset.py"}
```
## CSS ## CSS
```sass ```sass
/* Move the widget 2 cells in the x direction, and 4 in the y direction. */ /* Move the widget 8 cells in the x direction and 2 in tye y direction */
offset: 2 4; offset: 8 2;
/* Move the widget 4 cells in the x direction
offset-x: 4;
/* Move the widget -2 cells in the y direction
offset-y: -2;
``` ```
## Python ## Python
You cannot change programmatically the offset for a single axis.
You have to set the two axes at the same time.
```python ```python
# Move the widget 2 cells in the x direction, and 4 in the y direction. # Move the widget 2 cells in the x direction, and 4 in the y direction.
widget.styles.offset = (2, 4) widget.styles.offset = (2, 4)