mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
196d430582
Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.
68 lines
1.3 KiB
Markdown
68 lines
1.3 KiB
Markdown
# Display
|
|
|
|
The `display` property defines whether a widget is displayed or not.
|
|
|
|
## Syntax
|
|
|
|
```
|
|
display: block | none;
|
|
```
|
|
|
|
### Values
|
|
|
|
| Value | Description |
|
|
|-------------------|--------------------------------------------------------------------------|
|
|
| `block` (default) | Display the widget as normal. |
|
|
| `none` | The widget is not displayed and space will no longer be reserved for it. |
|
|
|
|
## Example
|
|
|
|
Note that the second widget is hidden by adding the `"remove"` class which sets the display style to `none`.
|
|
|
|
=== "display.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/display.py"
|
|
```
|
|
|
|
=== "display.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/display.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/display.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Widget is shown */
|
|
display: block;
|
|
|
|
/* Widget is not shown */
|
|
display: none;
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# Hide the widget
|
|
self.styles.display = "none"
|
|
|
|
# Show the widget again
|
|
self.styles.display = "block"
|
|
```
|
|
|
|
There is also a shortcut to show / hide a widget. The `display` property on `Widget` may be set to `True` or `False` to show or hide the widget.
|
|
|
|
```python
|
|
# Hide the widget
|
|
widget.display = False
|
|
|
|
# Show the widget
|
|
widget.display = True
|
|
```
|