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. There are a number of styles which influence the appearance of these links within a widget.
| Property | Description | | Property | Description |
|-------------------------|-------------------------------------------------------------| |-------------------------------------------------------|-------------------------------------------------------------------|
| [`link-color`](./link_color.md) | The color of link text. | | [`link-color`](./link_color.md) | The color of the link text. |
| [`link-background`](./link_background.md) | The background color of link text. | | [`link-background`](./link_background.md) | The background color of the link text. |
| [`link-style`](./link_style.md) | The style of link text (e.g. underline). | | [`link-style`](./link_style.md) | The style of the link text (e.g. underline). |
| [`link-hover-color`](./link_hover_color.md) | The color of link text with the cursor above it. | | [`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 link text with the cursor above 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 link text with the cursor above it. | | [`link-hover-style`](./link_hover_style.md) | The style of the link text when the cursor is over it. |
## Syntax ## Syntax
```scss ```scss
link-color: <COLOR>; link-color: <COLOR> [<PERCENTAGE>];
link-background: <COLOR>; link-background: <COLOR> [<PERCENTAGE>];
link-style: <TEXT STYLE> ...; link-style: <TEXT STYLE>;
link-hover-color: <COLOR>; link-hover-color: <COLOR> [<PERCENTAGE>];
link-hover-background: <COLOR>; link-hover-background: <COLOR> [<PERCENTAGE>];
link-hover-style: <TEXT STYLE> ...; link-hover-style: <TEXT STYLE>;
``` ```
--8<-- "docs/styles/snippets/color_css_syntax.md" --8<-- "docs/styles/snippets/color_css_syntax.md"
@@ -34,8 +34,8 @@ link-hover-style: <TEXT STYLE> ...;
## Example ## Example
In the example below, the first `Static` illustrates default link styling. In the example below, the first label illustrates default link styling.
The second `Static` uses CSS to customize the link color, background, and style. The second label uses CSS to customize the link color, background, and style.
=== "Output" === "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 !!! 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 ## Syntax
@@ -18,7 +18,7 @@ link-background: <COLOR> <PERCENTAGE>;
## Example ## 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. It also shows that `link-background` does not affect hyperlinks.
=== "Output" === "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 !!! 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 ## Syntax

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

@@ -1,10 +1,10 @@
# Link-hover-background # 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 !!! 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 ## 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 !!! 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 ## 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 !!! 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 ## 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 !!! 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 ## Syntax