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

Use specific rules in CSS type examples.

Browse Source 
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2023-01-09 09:32:10 +00:00
parent c0d7f7cebf
commit 81ddae7933
13 changed files with 74 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/css_types/_template.md
View File

@@ -46,14 +46,13 @@ The [`<my-type>`](/css_types/my_type) type can take any of the following values:
### CSS
<!--
Examples should be rule-agnostic.
Include a good variety of examples.
If the type has many different syntaxes, cover all of them.
Add comments when needed/if helpful.
-->
```sass
* {
.some-class {
rule: type-value-1;
rule: type-value-2;
rule: type-value-3;
@@ -65,7 +64,7 @@ Add comments when needed/if helpful.
<!-- Same examples as above. -->
```py
type_name = type_value_1
type_name = type_value_2
type_name = type_value_3
widget.styles.rule = type_value_1
widget.styles.rule = type_value_2
widget.styles.rule = type_value_3
```

39
docs/css_types/border.md
View File

@@ -37,41 +37,18 @@ textual borders
### CSS
```sass
* {
rule: ascii /* A border with plus, hyphen, and vertical bar characters. */
rule: blank /* A blank border (reserves space for a border). */
rule: dashed /* Dashed line border. */
rule: double /* Double lined border. */
rule: heavy /* Heavy border. */
rule: hidden /* Alias for "none". */
rule: hkey /* Horizontal key-line border. */
rule: inner /* Thick solid border. */
rule: none /* Disabled border. */
rule: outer /* Solid border with additional space around content. */
rule: round /* Rounded corners. */
rule: solid /* Solid border. */
rule: tall /* Solid border with additional space top and bottom. */
rule: vkey /* Vertical key-line border. */
rule: wide /* Solid border with additional space left and right. */
#container {
border: heavy red;
}
#heading {
border-bottom: solid blue;
}
```
### Python
```py
border = "ascii" # A border with plus, hyphen, and vertical bar characters.
border = "blank" # A blank border (reserves space for a border).
border = "dashed" # Dashed line border.
border = "double" # Double lined border.
border = "heavy" # Heavy border.
border = "hidden" # Alias for "none".
border = "hkey" # Horizontal key-line border.
border = "inner" # Thick solid border.
border = "none" # Disabled border.
border = "outer" # Solid border with additional space around content.
border = "round" # Rounded corners.
border = "solid" # Solid border.
border = "tall" # Solid border with extras space top and bottom.
border = "vkey" # Vertical key-line border.
border = "wide" # Solid border with additional space left and right.
widget.styles.border = ("heavy", "red")
widget.styles.border_bottom = ("solid", "blue")
```

29
docs/css_types/color.md
View File

@@ -23,27 +23,30 @@ For more details about the exact formats accepted, see [the class method `Color.
### CSS
```sass
* {
rule: red; /* color name */
rule: #A8F; /* 3-digit hex RGB */
rule: #FF00FFDD; /* 6-digit hex RGB + transparency */
rule: rgb(15,200,73); /* RGB description */
rule: hsl(300,20%,70%); /* HSL description */
rule: $accent; /* Textual variable */
Header {
background: red; /* Color name */
}
.accent {
color: $accent; /* Textual variable */
}
#footer {
tint: hsl(300, 20%, 70%); /* HSL description */
}
```
### Python
In Python, rules that expect a `<color>` can also accept an instance of the type [`Color`][textual.color.Color].
```py
# Mimicking the CSS syntax
color = "red"
color = "#A8F"
color = "#FF00FFDD"
color = "rgb(15,200,73)"
color = "hsl(300,20%,70%)"
color = "$accent"
widget.styles.background = "red" # Color name
widget.styles.color = "$accent" # Textual variable
widget.styles.tint = "hsl(300, 20%, 70%)" # HSL description
from textual.color import Color
# Using a Color object directly...
color = Color(16, 200, 45)
# ... which can also parse the CSS syntax

10
docs/css_types/horizontal.md
View File

@@ -17,17 +17,13 @@ The [`<horizontal>`](/css_types/horizontal) type can take any of the following v
### CSS
```sass
* {
rule: left;
rule: center;
rule: right
.container {
align-horizontal: right;
}
```
### Python
```py
horizontal = "left"
horizontal = "center"
horizontal = "right"
widget.styles.align_horizontal = "right"
```

8
docs/css_types/integer.md
View File

@@ -15,9 +15,8 @@ An [`<integer>`](/css_types/integer) is any valid integer number like `-10` or `
### CSS
```sass
* {
rule: -5;
rule: 10;
.classname {
offset: 10 -20
}
```
@@ -26,6 +25,5 @@ An [`<integer>`](/css_types/integer) is any valid integer number like `-10` or `
In Python, a rule that expects a CSS type `<integer>` will expect a value of the type `int`:
```py
integer = -5
integer = 10
widget.styles.offset = (10, -20)
```

16
docs/css_types/name.md
View File

@@ -14,23 +14,13 @@ A [`<name>`](/css_types/name) is any non-empty sequence of characters:
### CSS
```sass
* {
rule: onlyLetters;
rule: Letters-and-hiphens;
rule: _leading-underscore;
rule: letters-and-1-digit;
rule: name1234567890;
Screen {
layers: onlyLetters Letters-and-hiphens _lead-under letters-1-digit;
}
```
### Python
<!-- Same examples as above. -->
```py
name = "onlyLetters"
name = "Letters-and-hiphens"
name = "_leading-underscore"
name = "letters-and-1-digit"
name = "name1234567890"
widget.styles.layers = "onlyLetters Letters-and-hiphens _lead-under letters-1-digit"
```

17
docs/css_types/number.md
View File

@@ -11,11 +11,12 @@ A [`<number>`](/css_types/number) is an [`<integer>`](/css_types/integer), optio
### CSS
```sass
* {
css-rule: 6 /* Integers are numbers */
css-rule: -13 /* Numbers can be negative */
css-rule: 4.75 /* Numbers can have a decimal part */
css-rule: -73.73
Grid {
grid-size: 3 6 /* Integers are numbers */
}
.translucid {
opacity: 0.5 /* Numbers can have a decimal part */
}
```
@@ -24,8 +25,6 @@ A [`<number>`](/css_types/number) is an [`<integer>`](/css_types/integer), optio
In Python, a rule that expects a CSS type `<number>` will accept an `int` or a `float`:
```py
number = 6 # ints are numbers
number = -13 # ints can be negative
number = 4.75 # floats are numbers
number = -73.73 # negative floats too
widget.styles.grid_size = (3, 6) # Integers are numbers
widget.styles.opacity = 0.5 # Numbers can have a decimal part
```

10
docs/css_types/overflow.md
View File

@@ -17,17 +17,13 @@ The [`<overflow>`](/css_types/overflow) type can take any of the following value
### CSS
```sass
* {
rule: auto; /* Determine overflow mode automatically. */
rule: hidden; /* Don't overflow. */
rule: scroll; /* Allow overflowing. */
#container {
overflow-y: hidden; /* Don't overflow */
}
```
### Python
```py
overflow = "auto" # Determine overflow mode automatically.
overflow = "hidden" # Don't overflow.
overflow = "scroll" # Allow overflowing.
widget.styles.overflow_y = "hidden" # Don't overflow
```

15
docs/css_types/percentage.md
View File

@@ -17,14 +17,21 @@ Some rules may clamp the values between `0%` and `100%`.
### CSS
```sass
* {
rule: 70%; /* Integer followed by % */
rule: -3.5%; /* The number can be negative/decimal */
#footer {
/* Integer followed by % */
color: red 70%;
/* The number can be negative/decimal, although that may not make sense */
offset: -30% 12.5%;
}
```
### Python
```py
percentage = "70%"
# Integer followed by %
widget.styles.color = "red 70%"
# The number can be negative/decimal, althought that may not make sense
widget.styles.offset = ("-30%", "12.5%")
```

22
docs/css_types/scalar.md
View File

@@ -97,27 +97,15 @@ For example, if its container is big enough, a label with `width: auto` will be
### CSS
```sass
* {
rule: 16; /* 16 cells */
rule: 1fr; /* proportional size of 1 */
rule: 50%; /* 50% of the same dimension of the parent */
rule: 25w; /* 25% of the width of the parent */
rule: 75h; /* 75% of the height of the parent */
rule: 25vw; /* 25% of the viewport width */
rule: 75vh; /* 75% of the viewport height */
rule: auto; /* special value */
Horizontal {
width: 60; /* 60 cells */
height: 1fr; /* proportional size of 1 */
}
```
### Python
```py
scalar = 16 # Cell unit can be specified with an int/float
scalar = "1fr" # proportional size of 1
scalar = "50%" # 50% of the same dimension of the parent
scalar = "25w" # 25% of the width of the parent
scalar = "75h" # 75% of the height of the parent
scalar = "25vw" # 25% of the viewport width
scalar = "75vh" # 75% of the viewport height
scalar = "auto" # special value
widget.styles.width = 16 # Cell unit can be specified with an int/float
widget.styles.height = "1fr" # proportional size of 1
```

14
docs/css_types/text_align.md
View File

@@ -28,23 +28,13 @@ A [`<text-align>`](/css_types/text_align) can be any of the following values:
### CSS
```sass
* {
rule: center;
rule: end;
Label {
rule: justify;
rule: left;
rule: right;
rule: start;
}
```
### Python
```py
text_align = "center"
text_align = "end"
text_align = "justify"
text_align = "left"
text_align = "right"
text_align = "start"
widget.styles.text_align = "justify"
```

20
docs/css_types/text_style.md
View File

@@ -24,18 +24,14 @@ A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combinati
### CSS
```sass
* {
#label1 {
/* You can specify any value by itself. */
rule: bold;
rule: italic;
rule: none;
rule: reverse;
rule: strike;
rule: underline;
}
#label2 {
/* You can also combine multiple values. */
rule: strike bold italic reverse;
rule: bold underline italic;
}
```
@@ -43,14 +39,8 @@ A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combinati
```py
# You can specify any value by itself
text_style = "bold"
text_style = "italic"
text_style = "none"
text_style = "reverse"
text_style = "strike"
text_style = "underline"
widget.styles.text_style = "strike"
# You can also combine multiple values
text_style = "strike bold italic reverse"
text_style = "bold underline italic"
widget.styles.text_style = "bold underline italic"
```

10
docs/css_types/vertical.md
View File

@@ -17,17 +17,13 @@ The [`<vertical>`](/css_types/vertical) type can take any of the following value
### CSS
```sass
* {
rule: top;
rule: middle;
rule: bottom
.container {
align-vertical: top;
}
```
### Python
```py
vertical = "top"
vertical = "middle"
vertical = "bottom"
widget.styles.align_vertical = "top"
```