mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Update links references.
This commit is contained in:
Rodrigo Girão Serrão
@@ -1,4 +1,4 @@
|
||||
The [`<text-style>`](/css_types/text_style) type can be any _space-separated_ combination of the following values:
|
||||
A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combination of the following values:
|
||||
|
||||
| Value | Description |
|
||||
|-------------|-----------------------------------------------------------------|
|
||||
|
||||
@@ -1,35 +1,51 @@
|
||||
# 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.
|
||||
|
||||
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 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-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
|
||||
|
||||
```scss
|
||||
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/snippets/syntax_block_start.md"
|
||||
<a href="./link_background.md">link-background</a>: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
|
||||
<a href="./link_color.md">link-color</a>: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
|
||||
<a href="./link_style.md">link-style</a>: <a href="../css_types/text_style.md"><text-style></a>;
|
||||
|
||||
<a href="./link_hover_background.md">link-hover-background</a>: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
|
||||
<a href="./link_hover_color.md">link-hover-color</a>: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
|
||||
<a href="./link_hover_style.md">link-hover-style</a>: <a href="../css_types/text_style.md"><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.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
#### <text-style>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/text_style.md"
|
||||
|
||||
## Example
|
||||
|
||||
@@ -8,12 +8,20 @@ The `link-background` sets the background color of the link.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
link-background: <COLOR> <PERCENTAGE>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
link-background: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
@@ -8,12 +8,20 @@ The `link-color` sets the color of the link text.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
link-color: <COLOR> <PERCENTAGE>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
link-color: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
@@ -8,14 +8,26 @@ The `link-hover-background` sets the background color of the link when the mouse
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
link-hover-background: <COLOR> <PERCENTAGE>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
link-hover-background: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-hover-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-hover-background` set to `$accent`.
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-hover-background`.
|
||||
|
||||
@@ -8,14 +8,26 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
link-hover-color: <COLOR> <PERCENTAGE>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
link-hover-color: <a href="../css_types/color.md"><color></a> [<a href="../css_types/percentage.md"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-hover-color` set to `white`.
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some links that have their colour changed when the mouse moves over it.
|
||||
|
||||
@@ -8,13 +8,19 @@ The `link-hover-style` sets the text style for the link text when the mouse curs
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
link-hover-style: <COLOR> <PERCENTAGE>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
link-hover-style: <a href="../css_types/text_style.md"><text-style></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
`link-hover-style` applies its [`<text-style>`](../../css_types/text_style.md) to the text of Textual action links when the mouse pointer is over them.
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/text_style.md"
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-hover-style` set to `bold`.
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -8,12 +8,20 @@ The `link-style` sets the text style for the link text.
|
||||
|
||||
## Syntax
|
||||
|
||||
```sass
|
||||
link-style: <TEXT STYLE>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
link-style: <a href="../css_types/text_style.md"><text-style></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-style` will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/text_style.md"
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-style` set to `underline`.
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some links with different styles applied to their text.
|
||||
|
||||
Reference in New Issue
Block a user