Improve docs on background style.

This commit is contained in:
Rodrigo Girão Serrão
2022-12-15 11:30:39 +00:00
parent 3e5698c21e
commit c3d8df7d2e

View File

@@ -1,6 +1,6 @@
# Background # Background
The `background` rule sets the background color of the widget. The `background` rule sets the background color of a widget with an optional transparency level.
## Syntax ## Syntax
@@ -8,7 +8,15 @@ The `background` rule sets the background color of the widget.
background: <COLOR> [<PERCENTAGE>]; background: <COLOR> [<PERCENTAGE>];
``` ```
## Example The legal values for `<COLOR>` are dependant on the [class `Color`][textual.color.Color] and include:
- a recognised [named color](../../api/color#textual.color--named-colors) (e.g., `red`);
- a hexadecimal number representing the RGB values of the color (e.g., `#F35573`);
- a color description in the HSL system (e.g., `hsl(290,70%,80%)`)
For more details about the exact formats accepted, see [the class method `Color.parse`][textual.color.Color.parse].
## Examples
This example creates three widgets and applies a different background to each. This example creates three widgets and applies a different background to each.
@@ -29,6 +37,25 @@ This example creates three widgets and applies a different background to each.
```{.textual path="docs/examples/styles/background.py"} ```{.textual path="docs/examples/styles/background.py"}
``` ```
The next example creates ten widgets layed out side by side to show the effect of setting different percentages for the transparency of the background color.
=== "background_transparency.py"
```python
--8<-- "docs/examples/styles/background_transparency.py"
```
=== "background_transparency.css"
```sass
--8<-- "docs/examples/styles/background_transparency.css"
```
=== "Output"
```{.textual path="docs/examples/styles/background_transparency.py"}
```
## CSS ## CSS
```sass ```sass
@@ -40,6 +67,9 @@ background: red 20%;
/* RGB color */ /* RGB color */
background: rgb(100,120,200); background: rgb(100,120,200);
/* HSL color */
background: hsl(290,70%,80%);
``` ```
## Python ## Python
@@ -49,9 +79,13 @@ You can use the same syntax as CSS, or explicitly set a `Color` object for finer
```python ```python
# Set blue background # Set blue background
widget.styles.background = "blue" widget.styles.background = "blue"
# Set through HSL model
widget.styles.background = "hsl(351,32%,89%)"
from textual.color import Color from textual.color import Color
# Set with a color object # Set with a color object by parsing a string
widget.styles.background = Color.parse("pink") widget.styles.background = Color.parse("pink")
widget.styles.background = Color.parse("#FF00FF")
# Set with a color object instantiated directly
widget.styles.background = Color(120, 60, 100) widget.styles.background = Color(120, 60, 100)
``` ```