mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
da9a481f1c
Supposedly, this had been done in an earlier commit for all styles. Apparently, I forgot to open styles references that were one level deeper in the directory, so the pages about grid, links, and scrollbar colors still included the css types values directly in their reference pages.
68 lines
3.0 KiB
Markdown
68 lines
3.0 KiB
Markdown
# Links
|
|
|
|
Textual supports the concept of inline "links" embedded in text which trigger an action when pressed.
|
|
There are a number of styles which influence the appearance of these links within a widget.
|
|
|
|
!!! note
|
|
|
|
These CSS rules only target Textual action links. Internet hyperlinks are not affected by these CSS rules.
|
|
|
|
| Property | Description |
|
|
|-------------------------------------------------------|-------------------------------------------------------------------|
|
|
| [`link-background`](./link_background.md) | The background color of the link text. |
|
|
| [`link-color`](./link_color.md) | The color of the link text. |
|
|
| [`link-hover-background`](./link_hover_background.md) | The background color of the link text when the cursor is over it. |
|
|
| [`link-hover-color`](./link_hover_color.md) | The color of the link text when the cursor is over it. |
|
|
| [`link-hover-style`](./link_hover_style.md) | The style of the link text when the cursor is over it. |
|
|
| [`link-style`](./link_style.md) | The style of the link text (e.g. underline). |
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
<a href="./link_background">link-background</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
|
|
|
<a href="./link_color">link-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
|
|
|
<a href="./link_style">link-style</a>: <a href="../../css_types/text_style"><text-style></a>;
|
|
|
|
<a href="./link_hover_background">link-hover-background</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
|
|
|
<a href="./link_hover_color">link-hover-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
|
|
|
<a href="./link_hover_style">link-hover-style</a>: <a href="../../css_types/text_style"><text-style></a>;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
Visit each style's reference page to learn more about how the values are used.
|
|
|
|
## Example
|
|
|
|
In the example below, the first label illustrates default link styling.
|
|
The second label uses CSS to customize the link color, background, and style.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/links.py"}
|
|
```
|
|
|
|
=== "links.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/links.py"
|
|
```
|
|
|
|
=== "links.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/links.css"
|
|
```
|
|
|
|
## Additional Notes
|
|
|
|
* Inline links are not widgets, and thus cannot be focused.
|
|
|
|
## See Also
|
|
|
|
* An [introduction to links](../../guide/actions.md#links) in the Actions guide.
|
|
|
|
[//]: # (TODO: Links are documented twice in the guide, and one will likely be removed. Check the link above still works after that.)
|