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

Update reference for min/max width/height.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-22 17:46:08 +00:00
parent d0c744d8d9
commit 296dd73565
4 changed files with 157 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/styles/max_height.md
View File

@@ -4,18 +4,48 @@ The `max-height` rule sets a maximum height for a widget.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
max-height: <SCALAR>; max-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
The `max-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`height`](./height.md) of a widget.
That is, the height of a widget is never allowed to exceed `max-height`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders that were defined to span vertically from the top edge of the terminal to the bottom edge.
Then, we set `max-height` individually on each placeholder.
=== "Output"
```{.textual path="docs/examples/styles/max_height.py"}
```
=== "max_height.py"
```py
--8<-- "docs/examples/styles/max_height.py"
```
=== "max_height.css"
```css
--8<-- "docs/examples/styles/max_height.css"
```
1. This won't affect the placeholder because its height is less than the maximum height.
## CSS ## CSS
```sass ```sass
/* Set the maximum height to 10 rows */
/* Set a maximum height of 10 rows */
max-height: 10; max-height: 10;
/* Set a maximum height of 25% of the screen height */ /* Set the maximum height to 25% of the viewport height */
max-height: 25vh; max-height: 25vh;
``` ```
@@ -25,7 +55,6 @@ max-height: 25vh;
# Set the maximum height to 10 rows # Set the maximum height to 10 rows
widget.styles.max_height = 10 widget.styles.max_height = 10
# Set the maximum height to 25% of the screen height # Set the maximum height to 25% of the viewport height
widget.styles.max_height = "25vh" widget.styles.max_height = "25vh"
``` ```

50
docs/styles/max_width.md
View File

@@ -4,27 +4,57 @@ The `max-width` rule sets a maximum width for a widget.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
max-width: <SCALAR>; max-width: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
The `max-width` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`width`](./width.md) of a widget.
That is, the width of a widget is never allowed to exceed `max-width`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders that were defined to span horizontally from the top edge of the terminal to the bottom edge.
Then, we set `max-width` individually on each placeholder.
=== "Output"
```{.textual path="docs/examples/styles/max_width.py"}
```
=== "max_width.py"
```py
--8<-- "docs/examples/styles/max_width.py"
```
=== "max_width.css"
```scss
--8<-- "docs/examples/styles/max_width.css"
```
1. This won't affect the placeholder because its width is less than the maximum width.
## CSS ## CSS
```sass ```sass
/* Set the maximum width to 10 rows */
/* Set a maximum width of 10 cells */
max-width: 10; max-width: 10;
/* Set a maximum width of 25% of the screen width */ /* Set the maximum width to 25% of the viewport width */
max-width: 25vw; max-width: 25vh;
``` ```
## Python ## Python
```python ```python
# Set the maximum width to 10 cells # Set the maximum width to 10 rows
widget.styles.max_width = 10 widget.styles.max_width = 10
# Set the maximum width to 25% of the screen width # Set the maximum width to 25% of the viewport width
widget.styles.max_width = "25vw" widget.styles.max_width = "25vh"
``` ```

49
docs/styles/min_height.md
View File

@@ -4,18 +4,48 @@ The `min-height` rule sets a minimum height for a widget.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
min-height: <SCALAR>; min-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
The `min-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines a lower bound for the [`height`](./height.md) of a widget.
That is, the height of a widget is never allowed to be under `min-height`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders with their height set to `50%`.
Then, we set `min-height` individually on each placeholder.
=== "Output"
```{.textual path="docs/examples/styles/min_height.py"}
```
=== "min_height.py"
```py
--8<-- "docs/examples/styles/min_height.py"
```
=== "min_height.css"
```css hl_lines="13"
--8<-- "docs/examples/styles/min_height.css"
```
1. This won't affect the placeholder because its height is larger than the minimum height.
## CSS ## CSS
```sass ```sass
/* Set the minimum height to 10 rows */
/* Set a minimum height of 10 rows */
min-height: 10; min-height: 10;
/* Set a minimum height of 25% of the screen height */ /* Set the minimum height to 25% of the viewport height */
min-height: 25vh; min-height: 25vh;
``` ```
@@ -23,9 +53,8 @@ min-height: 25vh;
```python ```python
# Set the minimum height to 10 rows # Set the minimum height to 10 rows
self.styles.min_height = 10 widget.styles.min_height = 10
# Set the minimum height to 25% of the screen height
self.styles.min_height = "25vh"
# Set the minimum height to 25% of the viewport height
widget.styles.min_height = "25vh"
``` ```

52
docs/styles/min_width.md
View File

@@ -1,30 +1,60 @@
# Min-width # Min-width
The `min-width` rules sets a minimum width for a widget. The `min-width` rule sets a minimum width for a widget.
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
min-width: <SCALAR>; min-width: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
The `min-width` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines a lower bound for the [`width`](./width.md) of a widget.
That is, the width of a widget is never allowed to be under `min-width`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders with their width set to `50%`.
Then, we set `min-width` individually on each placeholder.
=== "Output"
```{.textual path="docs/examples/styles/min_width.py"}
```
=== "min_width.py"
```py
--8<-- "docs/examples/styles/min_width.py"
```
=== "min_width.css"
```css hl_lines="13"
--8<-- "docs/examples/styles/min_width.css"
```
1. This won't affect the placeholder because its width is larger than the minimum width.
## CSS ## CSS
```sass ```sass
/* Set the minimum width to 10 rows */
/* Set a minimum width of 10 cells */
min-width: 10; min-width: 10;
/* Set a minimum width of 25% of the screen width */ /* Set the minimum width to 25% of the viewport width */
min-width: 25vw; min-width: 25vh;
``` ```
## Python ## Python
```python ```python
# Set the minimum width to 10 cells # Set the minimum width to 10 rows
widget.styles.min_width = 10 widget.styles.min_width = 10
# Set the minimum width to 25% of the screen width # Set the minimum width to 25% of the viewport width
widget.styles.min_width = "25vw" widget.styles.min_width = "25vh"
``` ```