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

View File

@@ -0,0 +1,6 @@
#custom {
width: auto;
link-color: black 90%;
link-background: dodgerblue;
link-style: bold underline;
}

View File

@@ -0,0 +1,18 @@
from textual.app import App, ComposeResult
from textual.widgets import Static
TEXT = """\
Here is a [@click='app.bell']link[/] which you can click!
"""
class LinksApp(App):
def compose(self) -> ComposeResult:
yield Static(TEXT)
yield Static(TEXT, id="custom")
app = LinksApp(css_path="links.css")
if __name__ == "__main__":
app.run()

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.