Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions docs/snippets/border_sub_title_align_all_example.md
Original file line number Diff line number Diff line change
@@ -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.
Open the code tabs to see the details of the code examples.

=== "Output"

```{.textual path="docs/examples/styles/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"
--8<-- "docs/examples/styles/border_sub_title_align_all.py"
```

1. Border (sub)titles can contain nested markup.
2. Long (sub)titles get truncated and occupy as much space as possible.
3. (Sub)titles can be stylised with Rich markup.
4. An empty (sub)title isn't displayed.
5. The markup can even contain Rich links.
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.
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.
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.

=== "border_sub_title_align_all.css"

```sass hl_lines="12 16 30 34 41 46"
--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`.
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.
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.
6. Naturally, (sub)title positioning is affected by padding.
Open the code tabs to see the details of the code examples.

=== "Output"

```{.textual path="docs/examples/styles/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"
--8<-- "docs/examples/styles/border_sub_title_align_all.py"
```

1. Border (sub)titles can contain nested markup.
2. Long (sub)titles get truncated and occupy as much space as possible.
3. (Sub)titles can be stylised with Rich markup.
4. An empty (sub)title isn't displayed.
5. The markup can even contain Rich links.
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.
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.
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.

=== "border_sub_title_align_all.css"

```sass hl_lines="12 16 30 34 41 46"
--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`.
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.
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.
6. Naturally, (sub)title positioning is affected by padding.
2 changes: 1 addition & 1 deletion docs/styles/border_subtitle_align.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down
2 changes: 1 addition & 1 deletion docs/styles/border_title_align.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down