Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>
This commit is contained in:
Will McGugan
2022-08-25 15:37:52 +01:00
committed by GitHub
parent 6e451d4217
commit a09f5726ec
7 changed files with 15 additions and 15 deletions

View File

@@ -181,9 +181,9 @@ Being able to iterate on the design without restarting the Python code can make
## Selectors ## Selectors
A selector is the text which precedes the curly braces in a set of rules. It tells textual which widgets it should apply the rules to. A selector is the text which precedes the curly braces in a set of rules. It tells Textual which widgets it should apply the rules to.
Selectors can target a kind of widget or a very specific widget. For instance you could have a selector that modifies all buttons, or you could target an individual button used in one dialog. This gives you a lot of flexibility in customization your user interface. Selectors can target a kind of widget or a very specific widget. For instance you could have a selector that modifies all buttons, or you could target an individual button used in one dialog. This gives you a lot of flexibility in customizing your user interface.
Let's look at the selectors supported by Textual CSS. Let's look at the selectors supported by Textual CSS.
@@ -245,7 +245,7 @@ A Widget's `id` attribute can not be changed after the Widget has been construct
Every widget can have a number of class names applied. The term "class" here is borrowed from web CSS, and has a different meaning to a Python class. You can think of a CSS class as a tag of sorts. Widgets with the same tag will share styles. Every widget can have a number of class names applied. The term "class" here is borrowed from web CSS, and has a different meaning to a Python class. You can think of a CSS class as a tag of sorts. Widgets with the same tag will share styles.
CSS classes are set via the widgets `classes` parameter in the constructor. Here's an example: CSS classes are set via the widget's `classes` parameter in the constructor. Here's an example:
```python ```python
yield Button(classes="success") yield Button(classes="success")
@@ -280,18 +280,18 @@ Class name selectors may be _chained_ together by appending another full stop an
} }
``` ```
Unlike the `id` attribute a Widget's classes can be changed after the Widget was created. Adding and removing CSS classes is the recommended way of changing the display while your app is running. There are a few methods you can use to manage CSS classes. Unlike the `id` attribute, a widget's classes can be changed after the widget was created. Adding and removing CSS classes is the recommended way of changing the display while your app is running. There are a few methods you can use to manage CSS classes.
- [add_class()][textual.dom.DOMNode.add_class] Adds one or more classes to a widget. - [add_class()][textual.dom.DOMNode.add_class] Adds one or more classes to a widget.
- [remove_class()][textual.dom.DOMNode.remove_class] Removes class name(s) from a widget. - [remove_class()][textual.dom.DOMNode.remove_class] Removes class name(s) from a widget.
- [toggle_class()][textual.dom.DOMNode.toggle_class] Removes a class name if it is present, or adds the name if its not already present. - [toggle_class()][textual.dom.DOMNode.toggle_class] Removes a class name if it is present, or adds the name if it's not already present.
- [has_class()][textual.dom.DOMNode.has_class] Checks if a class(es) is set on a widget. - [has_class()][textual.dom.DOMNode.has_class] Checks if a class(es) is set on a widget.
- [classes][textual.dom.DOMNode.classes] Is a frozen set of the class(es) set on a widget. - [classes][textual.dom.DOMNode.classes] Is a frozen set of the class(es) set on a widget.
### Universal selector ### Universal selector
The _universal_ selectors is denoted by an asterisk and will match _all_ widgets. The _universal_ selector is denoted by an asterisk and will match _all_ widgets.
For example, the following will draw a red outline around all widgets: For example, the following will draw a red outline around all widgets:
@@ -340,9 +340,9 @@ Let's say we want to make the text of the buttons in the dialog bold, but we _do
} }
``` ```
The `#dialog Button` selector matches all buttons that are below the widget with an id of "dialog". No other buttons will be matched. The `#dialog Button` selector matches all buttons that are below the widget with an ID of "dialog". No other buttons will be matched.
As with all selectors you can combine as many as you wish. The following will match a `Button` that is under a `Horizontal` widget _and_ under a widget with an id of `"dialog"`: As with all selectors, you can combine as many as you wish. The following will match a `Button` that is under a `Horizontal` widget _and_ under a widget with an id of `"dialog"`:
```css ```css
#dialog Horizontal Button { #dialog Horizontal Button {

View File

@@ -16,7 +16,7 @@ You can run Textual apps with the `run` subcommand. If you supply a path to a Py
textual run my_app.py textual run my_app.py
``` ```
The `run` sub-command assumes you have a App instance called `app` in the global scope of your Python file. If the application is called something different, you can specify it with a colon following the filename: The `run` sub-command assumes you have an App instance called `app` in the global scope of your Python file. If the application is called something different, you can specify it with a colon following the filename:
``` ```
textual run my_app.py:alternative_app textual run my_app.py:alternative_app
@@ -28,7 +28,7 @@ textual run my_app.py:alternative_app
## Console ## Console
When running any terminal application, you can no longer use `print` when debugging (or log to the console). This is because anything you write to standard output would overwrite application content, making it unreadable. Fortunately Textual supplies a debug console of it's own which has some super helpful features. When running any terminal application, you can no longer use `print` when debugging (or log to the console). This is because anything you write to standard output would overwrite application content, making it unreadable. Fortunately Textual supplies a debug console of its own which has some super helpful features.
To use the console, open up 2 terminal emulators. In the first one, run the following: To use the console, open up 2 terminal emulators. In the first one, run the following:

View File

@@ -1,5 +1,5 @@
A message pump is a class that processes messages. A message pump is a class that processes messages.
It is a base class for the App, Screen, and Widgets. It is a base class for the `App`, `Screen`, and `Widget` classes.
::: textual.message_pump.MessagePump ::: textual.message_pump.MessagePump

View File

@@ -20,7 +20,7 @@ margin: <INTEGER> <INTEGER> <INTEGER> <INTEGER>;
## Example ## Example
In this example we add a large margin to a some static text. In this example we add a large margin to some static text.
=== "margin.py" === "margin.py"

View File

@@ -1,6 +1,6 @@
# Max-height # Max-height
The `max-height` rule sets a maximum width for a widget. The `max-height` rule sets a maximum height for a widget.
## Syntax ## Syntax

View File

@@ -24,7 +24,7 @@ overflow-y: [auto|hidden|scroll];
Here we split the screen in to left and right sections, each with three vertically scrolling widgets that do not fit in to the height of the terminal. Here we split the screen in to left and right sections, each with three vertically scrolling widgets that do not fit in to the height of the terminal.
The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar. The right side has `overflow-y: hidden` which will prevent a scrollbar from being show. The left side has `overflow-y: auto` (the default) and will automatically show a scrollbar. The right side has `overflow-y: hidden` which will prevent a scrollbar from being shown.
=== "overflow.py" === "overflow.py"

View File

@@ -8,7 +8,7 @@ The padding rule adds space around the content of a widget. You can specify padd
| `padding: 1 2;` | Two values sets the padding for the top/bottom and left/right edges | | `padding: 1 2;` | Two values sets the padding for the top/bottom and left/right edges |
| `padding: 1 2 3 4;` | Four values sets top, right, bottom, and left padding independently | | `padding: 1 2 3 4;` | Four values sets top, right, bottom, and left padding independently |
Padding may also be set individually by setting `padding-top`, `padding-right`, `padding-bottom`, or `padding-left` to an single value. Padding may also be set individually by setting `padding-top`, `padding-right`, `padding-bottom`, or `padding-left` to a single value.
## Syntax ## Syntax