mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Apply suggestions from code review
Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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:
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user