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

Revise links reference.

Browse Source 
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2022-12-21 11:29:32 +00:00
parent cd3ba5cf2e
commit 52804e95f2
8 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/styles/links/demos/link_hover_style_demo.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 233 KiB

32
docs/styles/links/index.md
View File

@@ -8,24 +8,24 @@ Textual supports the concept of inline "links" embedded in text which trigger an
There are a number of styles which influence the appearance of these links within a widget.
| Property | Description |
|-------------------------|-------------------------------------------------------------|
| [`link-color`](./link_color.md) | The color of link text. |
| [`link-background`](./link_background.md) | The background color of link text. |
| [`link-style`](./link_style.md) | The style of link text (e.g. underline). |
| [`link-hover-color`](./link_hover_color.md) | The color of link text with the cursor above it. |
| [`link-hover-background`](./link_hover_background.md) | The background color of link text with the cursor above it. |
| [`link-hover-style`](./link_hover_style.md) | The style of link text with the cursor above it. |
| Property | Description |
|-------------------------------------------------------|-------------------------------------------------------------------|
| [`link-color`](./link_color.md) | The color of the link text. |
| [`link-background`](./link_background.md) | The background color of the link text. |
| [`link-style`](./link_style.md) | The style of the link text (e.g. underline). |
| [`link-hover-color`](./link_hover_color.md) | The color of the link text when the cursor is over it. |
| [`link-hover-background`](./link_hover_background.md) | The background 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. |
## 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> ...;
link-color: <COLOR> [<PERCENTAGE>];
link-background: <COLOR> [<PERCENTAGE>];
link-style: <TEXT STYLE>;
link-hover-color: <COLOR> [<PERCENTAGE>];
link-hover-background: <COLOR> [<PERCENTAGE>];
link-hover-style: <TEXT STYLE>;
```
--8<-- "docs/styles/snippets/color_css_syntax.md"
@@ -34,8 +34,8 @@ 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.
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"

4
docs/styles/links/link_background.md
View File

@@ -4,7 +4,7 @@ The `link-background` sets the background color of the link.
!!! note
`link-background` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
`link-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
## Syntax
@@ -18,7 +18,7 @@ link-background: <COLOR> <PERCENTAGE>;
## Example
The example below shows some links with their color changed.
The example below shows some links with their background color changed.
It also shows that `link-background` does not affect hyperlinks.
=== "Output"

2
docs/styles/links/link_color.md
View File

@@ -4,7 +4,7 @@ The `link-color` sets the color of the link text.
!!! note
`link-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
`link-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
## Syntax

4
docs/styles/links/link_hover_background.md
View File

@@ -1,10 +1,10 @@
# Link-hover-background
The `link-hover-background` sets the background color of the link.
The `link-hover-background` sets the background color of the link when the mouse cursor is over the link.
!!! note
`link-hover-background` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
`link-hover-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
## Syntax

2
docs/styles/links/link_hover_color.md
View File

@@ -4,7 +4,7 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is
!!! note
`link-hover-color` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
`link-hover-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
## Syntax

2
docs/styles/links/link_hover_style.md
View File

@@ -4,7 +4,7 @@ The `link-hover-style` sets the text style for the link text when the mouse curs
!!! note
`link-hover-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
`link-hover-style` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
## Syntax

2
docs/styles/links/link_style.md
View File

@@ -4,7 +4,7 @@ The `link-style` sets the text style for the link text.
!!! note
`link-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
`link-style` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
## Syntax