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

Merge pull request #904 from davep/css-docs-review-styles

Browse Source 
CSS docs review - Styles
This commit is contained in:
Dave Pearson
2022-10-15 17:59:24 +01:00
committed by GitHub
parent fa24296fe0 e280719816
commit bef450dc4c
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/guide/styles.md
View File

@@ -1,6 +1,6 @@
# Styles
In this chapter will explore how you can apply styles to your application to create beautiful user interfaces.
In this chapter we will explore how you can apply styles to your application to create beautiful user interfaces.
## Styles object
@@ -48,9 +48,9 @@ Note how the combined height of the widget is three rows in the terminal. This i
## Colors
There are a number of style attribute which accept colors. The most commonly used are [color](../styles/color.md) which sets the default color of text on a widget, and [background](..styles/background/md) which sets the background color (beneath the text).
There are a number of style attributes which accept colors. The most commonly used are [color](../styles/color.md) which sets the default color of text on a widget, and [background](..styles/background/md) which sets the background color (beneath the text).
You can set a color value to one of a number of pre-defined color constants, such as "crimson", "lime", and "palegreen". You can find a full list in the [Color reference](../reference/color.md#textual.color--named-colors).
You can set a color value to one of a number of pre-defined color constants, such as `"crimson"`, `"lime"`, and `"palegreen"`. You can find a full list in the [Color reference](../reference/color.md#textual.color--named-colors).
Here's how you would set the screen background to lime:
@@ -90,13 +90,13 @@ There are a few ways you can set alpha on a color in Textual.
- You can also set alpha with the `rgba` format, which is identical to `rgb` with the additional of a fourth value that should be between 0 and 1, where 0 is invisible and 1 is opaque. For example `"rgba(192,78,96,0.5)"`.
- You can add the `a` parameter on a [Color][textual.color.Color] object. For example `Color(192, 78, 96, a=0.5)` creates a translucent dark orchid.
The following examples shows what happens when you set alpha on background colors:
The following example shows what happens when you set alpha on background colors:
```python title="colors01.py" hl_lines="12-15"
--8<-- "docs/examples/guide/styles/colors02.py"
```
Notice that an alpha of 0.1 the background almost matches the screen, but at 1.0 it is a solid color.
Notice that at an alpha of 0.1 the background almost matches the screen, but at 1.0 it is a solid color.
```{.textual path="docs/examples/guide/styles/colors02.py"}
```
@@ -138,7 +138,7 @@ Note how the text wraps in the widget, and is cropped because it doesn't fit in
#### Auto dimensions
In practice, we generally want the size of a widget to adapt to it's content, which we can do by setting a dimension to `"auto"`.
In practice, we generally want the size of a widget to adapt to its content, which we can do by setting a dimension to `"auto"`.
Let's set the height to auto and see what happens.
@@ -195,7 +195,7 @@ Let's look at an example. We will create two widgets, one with a height of `"2fr
--8<-- "docs/examples/guide/styles/dimensions04.py"
```
The total `fr` units for height is 3. The first widget will have a screen height of two thirds because its height style is set to `2fr`. The second widget's height styles is `1fr` so its screen height will be one third. Here's what that looks like.
The total `fr` units for height is 3. The first widget will have a screen height of two thirds because its height style is set to `2fr`. The second widget's height style is `1fr` so its screen height will be one third. Here's what that looks like.
```{.textual path="docs/examples/guide/styles/dimensions04.py"}
```