Styles documentation for links properties

This commit is contained in:
Darren Burns
2022-10-11 11:22:24 +01:00
parent 999f39034a
commit f6452bbbd5
5 changed files with 82 additions and 2 deletions

55
docs/styles/links.md Normal file
View File

@@ -0,0 +1,55 @@
# 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.
| Property | Description |
|-------------------------|-------------------------------------------------------------|
| `link-color` | The color of link text. |
| `link-background` | The background color of link text. |
| `link-style` | The style of link text (e.g. underline). |
| `link-hover-color` | The color of link text with the cursor above it. |
| `link-hover-background` | The background color of link text with the cursor above it. |
| `link-hover-style` | The style of link text with the cursor above it. |
## Syntax
```scss
link-color: <COLOR>;
link-background: <COLOR>;
link-style: <TEXT STYLE> ...;
link-hover-color: <COLOR>;
link-hover-background: <COLOR>;
link-hover-style: <TEXT STYLE> ...;
```
## Example
In the example below, the first `Static` illustrates default link styling.
The second `Static` 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.