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

Fix some inaccuracies in the tutorial.

Browse Source
This commit is contained in:
UriyaHarpeness
2022-10-25 19:32:14 +03:00
parent 93e75f3f0e
commit 98fdb9d1a1
3 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/examples/tutorial/stopwatch03.css
View File

@@ -2,8 +2,9 @@ Stopwatch {
layout: horizontal; layout: horizontal;
background: $boost; background: $boost;
height: 5; height: 5;
padding: 1;
margin: 1; margin: 1;
min-width: 50;
padding: 1;
} }
TimeDisplay { TimeDisplay {

2
docs/examples/tutorial/stopwatch04.css
View File

@@ -2,8 +2,8 @@ Stopwatch {
layout: horizontal; layout: horizontal;
background: $boost; background: $boost;
height: 5; height: 5;
min-width: 50;
margin: 1; margin: 1;
min-width: 50;
padding: 1; padding: 1;
} }

8
docs/tutorial.md
View File

@@ -108,7 +108,7 @@ Let's examine `stopwatch01.py` in more detail.
--8<-- "docs/examples/tutorial/stopwatch01.py" --8<-- "docs/examples/tutorial/stopwatch01.py"
``` ```
The first line imports the Textual `App` class, which we will use as the base class for our App. The second line imports two builtin widgets: `Footer` which shows a bar at the bottom of the screen with current keys, and `Header` which shows a title and the current time at the top of the screen. Widgets are re-usable components responsible for managing a part of the screen. We will cover how to build widgets in this tutorial. The first line imports the Textual `App` class, which we will use as the base class for our App. The second line imports two builtin widgets: `Footer` which shows a bar at the bottom of the screen with bound keys, and `Header` which shows a title at the top of the screen. Widgets are re-usable components responsible for managing a part of the screen. We will cover how to build widgets in this tutorial.
The following lines define the app itself: The following lines define the app itself:
@@ -233,8 +233,9 @@ Stopwatch {
layout: horizontal; layout: horizontal;
background: $boost; background: $boost;
height: 5; height: 5;
padding: 1;
margin: 1; margin: 1;
min-width: 50;
padding: 1;
} }
``` ```
@@ -249,8 +250,9 @@ Here's how this CSS code changes how the `Stopwatch` widget is displayed.
- `layout: horizontal` aligns child widgets horizontally from left to right. - `layout: horizontal` aligns child widgets horizontally from left to right.
- `background: $boost` sets the background color to `$boost`. The `$` prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as `"blue"` or `rgb(20,46,210)`. - `background: $boost` sets the background color to `$boost`. The `$` prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as `"blue"` or `rgb(20,46,210)`.
- `height: 5` sets the height of our widget to 5 lines of text. - `height: 5` sets the height of our widget to 5 lines of text.
- `padding: 1` sets a padding of 1 cell around the child widgets.
- `margin: 1` sets a margin of 1 cell around the `Stopwatch` widget to create a little space between widgets in the list. - `margin: 1` sets a margin of 1 cell around the `Stopwatch` widget to create a little space between widgets in the list.
- `min-width: 50` sets the minimum width of our widget to 50 cells.
- `padding: 1` sets a padding of 1 cell around the child widgets.
Here's the rest of `stopwatch03.css` which contains further declaration blocks: Here's the rest of `stopwatch03.css` which contains further declaration blocks: