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

Improve subsection titles.

Browse Source 
Related issues: #2108
Related PRs: #2110, #2064
This commit is contained in:
Rodrigo Girão Serrão
2023-03-22 23:00:13 +00:00
parent a935a632fa
commit f9922ebe29
3 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
docs/snippets/border_sub_title_align_all_example.md
View File

@@ -1,38 +1,38 @@
This example shows all border title and subtitle alignments, together with some examples of how (sub)titles can have custom markup. This example shows all border title and subtitle alignments, together with some examples of how (sub)titles can have custom markup.
Open the code tabs to see the details of the code examples. Open the code tabs to see the details of the code examples.
=== "Output" === "Output"
```{.textual path="docs/examples/styles/border_sub_title_align_all.py"} ```{.textual path="docs/examples/styles/border_sub_title_align_all.py"}
``` ```
=== "border_sub_title_align_all.py" === "border_sub_title_align_all.py"
```py hl_lines="6 18 24 30 39 40 42 45 51 57 63" ```py hl_lines="6 18 24 30 39 40 42 45 51 57 63"
--8<-- "docs/examples/styles/border_sub_title_align_all.py" --8<-- "docs/examples/styles/border_sub_title_align_all.py"
``` ```
1. Border (sub)titles can contain nested markup. 1. Border (sub)titles can contain nested markup.
2. Long (sub)titles get truncated and occupy as much space as possible. 2. Long (sub)titles get truncated and occupy as much space as possible.
3. (Sub)titles can be stylised with Rich markup. 3. (Sub)titles can be stylised with Rich markup.
4. An empty (sub)title isn't displayed. 4. An empty (sub)title isn't displayed.
5. The markup can even contain Rich links. 5. The markup can even contain Rich links.
6. If the widget does not have a border, the title and subtitle are not shown. 6. If the widget does not have a border, the title and subtitle are not shown.
7. When the side borders are not set, the (sub)title will align with the edge of the widget. 7. When the side borders are not set, the (sub)title will align with the edge of the widget.
8. The title and subtitle are aligned on the left and very long, so they get truncated and we can still see the rightmost character of the border edge. 8. The title and subtitle are aligned on the left and very long, so they get truncated and we can still see the rightmost character of the border edge.
9. The title and subtitle are centered and very long, so they get truncated and are centered with one character of padding on each side. 9. The title and subtitle are centered and very long, so they get truncated and are centered with one character of padding on each side.
10. The title and subtitle are aligned on the right and very long, so they get truncated and we can still see the leftmost character of the border edge. 10. The title and subtitle are aligned on the right and very long, so they get truncated and we can still see the leftmost character of the border edge.
11. An auxiliary function to create labels with border title and subtitle. 11. An auxiliary function to create labels with border title and subtitle.
=== "border_sub_title_align_all.css" === "border_sub_title_align_all.css"
```sass hl_lines="12 16 30 34 41 46" ```sass hl_lines="12 16 30 34 41 46"
--8<-- "docs/examples/styles/border_sub_title_align_all.css" --8<-- "docs/examples/styles/border_sub_title_align_all.css"
``` ```
1. The default alignment for the title is `left` and the default alignment for the subtitle is `right`. 1. The default alignment for the title is `left` and the default alignment for the subtitle is `right`.
2. Specifying an alignment when the (sub)title is too long has no effect. (Although, it will have an effect if the (sub)title is shortened or if the widget is widened.) 2. Specifying an alignment when the (sub)title is too long has no effect. (Although, it will have an effect if the (sub)title is shortened or if the widget is widened.)
3. Setting the alignment does not affect empty (sub)titles. 3. Setting the alignment does not affect empty (sub)titles.
4. If the border is not set, or set to `none`/`hidden`, the (sub)title is not shown. 4. If the border is not set, or set to `none`/`hidden`, the (sub)title is not shown.
5. If the (sub)title alignment is on a side which does not have a border edge, the (sub)title will be flush to that side. 5. If the (sub)title alignment is on a side which does not have a border edge, the (sub)title will be flush to that side.
6. Naturally, (sub)title positioning is affected by padding. 6. Naturally, (sub)title positioning is affected by padding.

2
docs/styles/border_subtitle_align.md
View File

@@ -40,7 +40,7 @@ This example shows three labels, each with a different border subtitle alignment
``` ```
### All title and subtitle combinations ### Complete usage reference
--8<-- "docs/snippets/border_sub_title_align_all_example.md" --8<-- "docs/snippets/border_sub_title_align_all_example.md"

2
docs/styles/border_title_align.md
View File

@@ -40,7 +40,7 @@ This example shows three labels, each with a different border title alignment:
``` ```
### All title and subtitle combinations ### Complete usage reference
--8<-- "docs/snippets/border_sub_title_align_all_example.md" --8<-- "docs/snippets/border_sub_title_align_all_example.md"