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

Put example outputs in first tab.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2023-01-09 13:57:04 +00:00
parent e7afcbc0b5
commit 1300807b3a
13 changed files with 90 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/styles/align.md
View File

@@ -27,6 +27,11 @@ To specify alignment on a single axis, use the respective style and type:
This example contains a simple app with two labels centered on the screen with `align: center middle;`:
=== "Output"
```{.textual path="docs/examples/styles/align.py"}
```
=== "align.py"
```python
@@ -39,17 +44,16 @@ This example contains a simple app with two labels centered on the screen with `
--8<-- "docs/examples/styles/align.css"
```
=== "Output"
```{.textual path="docs/examples/styles/align.py"}
```
### All alignments
The next example shows a 3 by 3 grid of containers with text labels.
Each label has been aligned differently inside its container, and its text shows its `align: ...` value.
=== "Output"
```{.textual path="docs/examples/styles/align_all.py"}
```
=== "align_all.py"
```python
@@ -62,11 +66,6 @@ Each label has been aligned differently inside its container, and its text shows
--8<-- "docs/examples/styles/align_all.css"
```
=== "Output"
```{.textual path="docs/examples/styles/align_all.py"}
```
## CSS
```sass

20
docs/styles/background.md
View File

@@ -16,6 +16,11 @@ The style `background` needs a [`<color>`](../../css_types/color) followed by an
This example creates three widgets and applies a different background to each.
=== "Output"
```{.textual path="docs/examples/styles/background.py"}
```
=== "background.py"
```python
@@ -28,15 +33,15 @@ This example creates three widgets and applies a different background to each.
--8<-- "docs/examples/styles/background.css"
```
=== "Output"
```{.textual path="docs/examples/styles/background.py"}
```
### Different transparency settings
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.
=== "Output"
```{.textual path="docs/examples/styles/background_transparency.py"}
```
=== "background_transparency.py"
```python
@@ -49,11 +54,6 @@ The next example creates ten widgets layed out side by side to show the effect o
--8<-- "docs/examples/styles/background_transparency.css"
```
=== "Output"
```{.textual path="docs/examples/styles/background_transparency.py"}
```
## CSS
```sass

20
docs/styles/border.md
View File

@@ -58,6 +58,11 @@ Alternatively, you can see the examples below.
This examples shows three widgets with different border styles.
=== "Output"
```{.textual path="docs/examples/styles/border.py"}
```
=== "border.py"
```python
@@ -70,15 +75,15 @@ This examples shows three widgets with different border styles.
--8<-- "docs/examples/styles/border.css"
```
=== "Output"
```{.textual path="docs/examples/styles/border.py"}
```
### All border types
The next example shows a grid with all the available border types.
=== "Output"
```{.textual path="docs/examples/styles/border_all.py"}
```
=== "border_all.py"
```py
@@ -91,11 +96,6 @@ The next example shows a grid with all the available border types.
--8<-- "docs/examples/styles/border_all.css"
```
=== "Output"
```{.textual path="docs/examples/styles/border_all.py"}
```
### Borders and outlines
The next example makes the difference between [`border`](./border.md) and [`outline`](./outline.md) clearer by having three labels side-by-side.

10
docs/styles/box_sizing.md
View File

@@ -21,6 +21,11 @@ Both widgets in this example have the same height (5).
The top widget has `box-sizing: border-box` which means that padding and border reduce the space for content.
The bottom widget has `box-sizing: content-box` which increases the size of the widget to compensate for padding and border.
=== "Output"
```{.textual path="docs/examples/styles/box_sizing.py"}
```
=== "box_sizing.py"
```python
@@ -33,11 +38,6 @@ The bottom widget has `box-sizing: content-box` which increases the size of the
--8<-- "docs/examples/styles/box_sizing.css"
```
=== "Output"
```{.textual path="docs/examples/styles/box_sizing.py"}
```
## CSS
```sass

20
docs/styles/color.md
View File

@@ -18,6 +18,11 @@ Instead of a [`<color>`](../../css_types/color), one can use the special value `
This example sets a different text color for each of three different widgets.
=== "Output"
```{.textual path="docs/examples/styles/color.py"}
```
=== "color.py"
```python
@@ -30,15 +35,15 @@ This example sets a different text color for each of three different widgets.
--8<-- "docs/examples/styles/color.css"
```
=== "Output"
```{.textual path="docs/examples/styles/color.py"}
```
### Auto
The next example shows how `auto` chooses between a lighter or a darker text color to increase the contrast and improve readability.
=== "Output"
```{.textual path="docs/examples/styles/color_auto.py"}
```
=== "color_auto.py"
```py
@@ -51,11 +56,6 @@ The next example shows how `auto` chooses between a lighter or a darker text col
--8<-- "docs/examples/styles/color_auto.css"
```
=== "Output"
```{.textual path="docs/examples/styles/color_auto.py"}
```
## CSS
```sass

20
docs/styles/content_align.md
View File

@@ -28,6 +28,11 @@ To specify content alignment on a single axis, use the respective style and type
This first example shows three labels stacked vertically, each with different content alignments.
=== "Output"
```{.textual path="docs/examples/styles/content_align.py"}
```
=== "content_align.py"
```python
@@ -40,16 +45,16 @@ This first example shows three labels stacked vertically, each with different co
--8<-- "docs/examples/styles/content_align.css"
```
=== "Output"
```{.textual path="docs/examples/styles/content_align.py"}
```
### All content alignments
The next example shows a 3 by 3 grid of labels.
Each label has its text aligned differently.
=== "Output"
```{.textual path="docs/examples/styles/content_align_all.py"}
```
=== "content_align_all.py"
```py
@@ -62,11 +67,6 @@ Each label has its text aligned differently.
--8<-- "docs/examples/styles/content_align_all.css"
```
=== "Output"
```{.textual path="docs/examples/styles/content_align_all.py"}
```
## CSS
```sass

10
docs/styles/display.md
View File

@@ -19,6 +19,11 @@ display: block | none;
Note that the second widget is hidden by adding the `"remove"` class which sets the display style to `none`.
=== "Output"
```{.textual path="docs/examples/styles/display.py"}
```
=== "display.py"
```python
@@ -31,11 +36,6 @@ Note that the second widget is hidden by adding the `"remove"` class which sets
--8<-- "docs/examples/styles/display.css"
```
=== "Output"
```{.textual path="docs/examples/styles/display.py"}
```
## CSS
```sass

10
docs/styles/height.md
View File

@@ -17,6 +17,11 @@ By default, it sets the height of the content area, but if [`box-sizing`](./box_
This examples creates a widget with a height of 50% of the screen.
=== "Output"
```{.textual path="docs/examples/styles/height.py"}
```
=== "height.py"
```python
@@ -29,11 +34,6 @@ This examples creates a widget with a height of 50% of the screen.
--8<-- "docs/examples/styles/height.css"
```
=== "Output"
```{.textual path="docs/examples/styles/height.py"}
```
### All height formats
The next example creates a series of wide widgets with heights set with different units.

10
docs/styles/layout.md
View File

@@ -25,6 +25,11 @@ See the [layout](../guide/layout.md) guide for more information.
Note how the `layout` property affects the arrangement of widgets in the example below.
To learn more about the grid layout, you can see the [layout guide](../guide/layout.md) or the [grid reference](../grid).
=== "Output"
```{.textual path="docs/examples/styles/layout.py"}
```
=== "layout.py"
```python
@@ -37,11 +42,6 @@ To learn more about the grid layout, you can see the [layout guide](../guide/lay
--8<-- "docs/examples/styles/layout.css"
```
=== "Output"
```{.textual path="docs/examples/styles/layout.py"}
```
## CSS
```sass

10
docs/styles/opacity.md
View File

@@ -18,6 +18,11 @@ Values outside of these ranges will be clamped.
This example shows, from top to bottom, increasing opacity values for a label with a border and some text.
When the opacity is zero, all we see is the (black) background.
=== "Output"
```{.textual path="docs/examples/styles/opacity.py"}
```
=== "opacity.py"
```python
@@ -30,11 +35,6 @@ When the opacity is zero, all we see is the (black) background.
--8<-- "docs/examples/styles/opacity.css"
```
=== "Output"
```{.textual path="docs/examples/styles/opacity.py"}
```
## CSS
```sass

10
docs/styles/outline.md
View File

@@ -57,6 +57,11 @@ This example shows a widget with an outline. Note how the outline occludes the t
The next example shows a grid with all the available outline types.
=== "Output"
```{.textual path="docs/examples/styles/outline_all.py"}
```
=== "outline_all.py"
```py
@@ -69,11 +74,6 @@ The next example shows a grid with all the available outline types.
--8<-- "docs/examples/styles/outline_all.css"
```
=== "Output"
```{.textual path="docs/examples/styles/outline_all.py"}
```
### Borders and outlines
The next example makes the difference between [`border`](./border.md) and [`outline`](./outline.md) clearer by having three labels side-by-side.

10
docs/styles/tint.md
View File

@@ -14,6 +14,11 @@ The tint rule blends a [`<color>`](../css_types/color.md) with the widget. The c
This examples shows a green tint with gradually increasing alpha.
=== "Output"
```{.textual path="docs/examples/styles/tint.py"}
```
=== "tint.py"
```python
@@ -26,11 +31,6 @@ This examples shows a green tint with gradually increasing alpha.
--8<-- "docs/examples/styles/tint.css"
```
=== "Output"
```{.textual path="docs/examples/styles/tint.py"}
```
## CSS
```sass

10
docs/styles/width.md
View File

@@ -17,6 +17,11 @@ By default, it sets the width of the content area, but if [`box-sizing`](./box_s
This example adds a widget with 50% width of the screen.
=== "Output"
```{.textual path="docs/examples/styles/width.py"}
```
=== "width.py"
```python
@@ -29,11 +34,6 @@ This example adds a widget with 50% width of the screen.
--8<-- "docs/examples/styles/width.css"
```
=== "Output"
```{.textual path="docs/examples/styles/width.py"}
```
### All width formats
=== "Output"