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

more docs

Browse Source
This commit is contained in:
Will McGugan
2022-07-30 17:01:51 +01:00
parent 7ba36c1146
commit 7040d00c7b
22 changed files with 534 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/examples/styles/background.py Normal file
View File

@@ -0,0 +1,29 @@
from textual.app import App
from textual.widgets import Static
class BackgroundApp(App):
CSS = """
Static {
height:1fr;
content-align: center middle;
color: white;
}
#static1 {
background: red;
}
#static2 {
background: rgb(0, 255, 0);
}
#static3 {
background: hsl(240, 100%, 50%);
}
"""
def compose(self):
yield Static("Hello, World!", id="static1")
yield Static("Hello, World!", id="static2")
yield Static("Hello, World!", id="static3")
app = BackgroundApp()

34
docs/examples/styles/border.py Normal file
View File

@@ -0,0 +1,34 @@
from textual.app import App
from textual.widgets import Static
class BorderApp(App):
CSS = """
Screen > Static {
height:5;
content-align: center middle;
color: white;
margin: 1;
box-sizing: border-box;
}
#static1 {
background: red 20%;
border: solid red;
}
#static2 {
background: green 20%;
border: dashed green;
}
#static3 {
background: blue 20%;
border: tall blue;
}
"""
def compose(self):
yield Static("Hello, World!", id="static1")
yield Static("Hello, World!", id="static2")
yield Static("Hello, World!", id="static3")
app = BorderApp()

28
docs/examples/styles/color.py Normal file
View File

@@ -0,0 +1,28 @@
from textual.app import App
from textual.widgets import Static
class ColorApp(App):
CSS = """
Static {
height:1fr;
content-align: center middle;
}
#static1 {
color: red;
}
#static2 {
color: rgb(0, 255, 0);
}
#static3 {
color: hsl(240, 100%, 50%)
}
"""
def compose(self):
yield Static("Hello, World!", id="static1")
yield Static("Hello, World!", id="static2")
yield Static("Hello, World!", id="static3")
app = ColorApp()

27
docs/examples/styles/display.py
View File

@@ -1,24 +1,27 @@
from textual.app import App
from textual.widget import Widget
from textual.widgets import Static
class WidthApp(App):
class DisplayApp(App):
CSS = """
Screen > Widget {
height: 5;
background: blue;
color: white;
border: heavy white;
Screen {
background: green;
}
Widget.hidden {
Static {
height: 5;
background: white;
color: blue;
border: heavy blue;
}
Static.remove {
display: none;
}
"""
def compose(self):
yield Widget(id="widget1")
yield Widget(id="widget2", classes="hidden")
yield Widget(id="widget3")
yield Static("Widget 1")
yield Static("widget 2", classes="remove")
yield Static("widget 3")
app = WidthApp()
app = DisplayApp()

4
docs/examples/styles/height.py
View File

@@ -2,7 +2,7 @@ from textual.app import App
from textual.widget import Widget
class WidthApp(App):
class HeightApp(App):
CSS = """
Screen > Widget {
background: green;
@@ -15,4 +15,4 @@ class WidthApp(App):
yield Widget()
app = WidthApp()
app = HeightApp()

27
docs/examples/styles/margin.py Normal file
View File

@@ -0,0 +1,27 @@
from textual.app import App
from textual.widgets import Static
TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""
class MarginApp(App):
CSS = """
Static {
margin: 4 8;
background: blue 20%;
}
"""
def compose(self):
yield Static(TEXT)
app = MarginApp()

27
docs/examples/styles/padding.py Normal file
View File

@@ -0,0 +1,27 @@
from textual.app import App
from textual.widgets import Static
TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""
class PaddingApp(App):
CSS = """
Static {
padding: 4 8;
background: blue 20%;
}
"""
def compose(self):
yield Static(TEXT)
app = PaddingApp()

41
docs/examples/styles/text_style.py Normal file
View File

@@ -0,0 +1,41 @@
from textual.app import App
from textual.widgets import Static
TEXT = """I must not fear.
Fear is the mind-killer.
Fear is the little-death that brings total obliteration.
I will face my fear.
I will permit it to pass over me and through me.
And when it has gone past, I will turn the inner eye to see its path.
Where the fear has gone there will be nothing. Only I will remain."""
class TextStyleApp(App):
CSS = """
Screen {
layout: horizontal;
}
Static {
width:1fr;
}
#static1 {
background: red 30%;
text-style: bold;
}
#static2 {
background: green 30%;
text-style: italic;
}
#static3 {
background: blue 30%;
text-style: reverse;
}
"""
def compose(self):
yield Static(TEXT, id="static1")
yield Static(TEXT, id="static2")
yield Static(TEXT, id="static3")
app = TextStyleApp()

27
docs/examples/styles/visibility.py Normal file
View File

@@ -0,0 +1,27 @@
from textual.app import App
from textual.widgets import Static
class VisibilityApp(App):
CSS = """
Screen {
background: green;
}
Static {
height: 5;
background: white;
color: blue;
border: heavy blue;
}
Static.invisible {
visibility: hidden;
}
"""
def compose(self):
yield Static("Widget 1")
yield Static("widget 2", classes="invisible")
yield Static("widget 3")
app = VisibilityApp()

41
docs/styles/background.md Normal file
View File

@@ -0,0 +1,41 @@
# Background
The `background` rule sets the background color of the widget.
=== "background.py"
```python
--8<-- "docs/examples/styles/background.py"
```
=== "Output"
```{.textual path="docs/examples/styles/background.py"}
```
## CSS
```sass
/* Blue background */
background: blue;
/* 20% red backround */
background: red 20%;
/* RGB color */
background: rgb(100,120,200);
```
## Python
You can use the same syntax as CSS, or explicitly set a Color object.
```python
# Set blue background
widget.styles.background = "blue"
from textual.color import Color
# Set with a color object
widget.styles.background = Color.parse("pink")
```

41
docs/styles/color.md Normal file
View File

@@ -0,0 +1,41 @@
# Color
The `color` rule sets the text color of a Widget.
=== "color.py"
```python
--8<-- "docs/examples/styles/color.py"
```
=== "Output"
```{.textual path="docs/examples/styles/color.py"}
```
## CSS
```sass
/* Blue background */
color: blue;
/* 20% red backround */
color: red 20%;
/* RGB color */
color: rgb(100,120,200);
```
## Python
You can use the same syntax as CSS, or explicitly set a Color object.
```python
# Set blue background
widget.styles.color = "blue"
from textual.color import Color
# Set with a color object
widget.styles.color = Color.parse("pink")
```

2
docs/styles/height.md
View File

@@ -1,6 +1,6 @@
# Height
The `height` property sets a widget's height. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
The `height` style sets a widget's height. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
## Example

34
docs/styles/margin.md Normal file
View File

@@ -0,0 +1,34 @@
# Margin
The `margin` rule adds space around the entire widget.
- `1` Sets a margin of 1 around all 4 edges
- `1 2` Sets a margin of 1 on the top and bottom edges, and a margin of 2 on the left and right edges
- `1 2 3 4` Sets a margin of one on the top edge, 2 on the right, 3 on the bottom, and 4 on the left.
## Example
=== "margin.py"
```python
--8<-- "docs/examples/styles/margin.py"
```
=== "Output"
```{.textual path="docs/examples/styles/margin.py"}
```
## CSS
```sass
/* Set margin of 2 on the top and bottom edges, and 4 on the left and right */
margin: 2 4;
```
## Python
```python
# In Python you can set the margin as a tuple of integers
widget.styles.margin = (2, 3)
```

34
docs/styles/padding.md Normal file
View File

@@ -0,0 +1,34 @@
# Padding
The padding rule adds space around the content of a widget. You can specify padding with 1, 2 or 4 numbers.
- `1` Sets a padding of 1 around all 4 edges
- `1 2` Sets a padding of 1 on the top and bottom edges, and a padding of two on the left and right edges
- `1 2 3 4` Sets a padding of one on the top edge, 2 on the right, 3 on the bottom, and 4 on the left.
## Example
=== "padding.py"
```python
--8<-- "docs/examples/styles/padding.py"
```
=== "Output"
```{.textual path="docs/examples/styles/padding.py"}
```
## CSS
```sass
/* Set padding of 2 on the top and bottom edges, and 4 on the left and right */
padding: 2 4;
```
## Python
```python
# In Python you can set the padding as a tuple of integers
widget.styles.padding = (2, 3)
```

36
docs/styles/text_style.md Normal file
View File

@@ -0,0 +1,36 @@
# Text-style
The `text-style` rule enables a number of different ways of displaying text. The value may be set to any of the following:
- `"bold"` Sets **bold text**
- `"italic"` Sets _italic text_
- `"reverse"` Sets reverse video text (foreground and background colors reversed)
- `"underline"` Sets <u>underline text</u>
- `"strike"` Sets <s>strikethrough text</s>
Text styles may be set in combination. For example "bold underline" or "reverse underline strike".
## Example
=== "text_style.py"
```python
--8<-- "docs/examples/styles/text_style.py"
```
=== "Output"
```{.textual path="docs/examples/styles/text_style.py"}
```
## CSS
```sass
text-style: italic;
```
## Python
```python
widget.styles.text_style = "italic"
```

48
docs/styles/visibility.md Normal file
View File

@@ -0,0 +1,48 @@
# Visibility
The `visibility` rule may be used to make a widget invisible while still reserving spacing for it. The default value is `"visible"` which will cause the Widget to be displayed as normal. Setting the value to `"hidden"` will cause the Widget to be removed from the screen.
## Example
Note that the second widget is hidden, while leaving a space where it would have been rendered.
=== "visibility.py"
```python
--8<-- "docs/examples/styles/visibility.py"
```
=== "Output"
```{.textual path="docs/examples/styles/visibility.py"}
```
## CSS
```sass
/* Widget is on screen */
visibility: visible;
/* Widget is not on the screen */
visibility: hidden;
```
## Python
```python
# Widget is invisible
self.styles.visibility = "hidden"
# Widget is visible
self.styles.visibility = "visible"
```
There is also a shortcut to set a Widget's visibility. The `visible` property on `Widget` may be set to `True` or `False`.
```python
# Make a widget invisible
widget.visible = False
# Make the widget visible again
widget.visible = True
```

2
docs/styles/width.md
View File

@@ -1,6 +1,6 @@
# Width
The `width` property sets a widget's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
The `width` style sets a widget's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box` it sets the width of the border area.
## Example