diff --git a/docs/examples/styles/links.css b/docs/examples/styles/links.css new file mode 100644 index 000000000..be1e995f0 --- /dev/null +++ b/docs/examples/styles/links.css @@ -0,0 +1,6 @@ +#custom { + width: auto; + link-color: black 90%; + link-background: dodgerblue; + link-style: bold underline; +} diff --git a/docs/examples/styles/links.py b/docs/examples/styles/links.py new file mode 100644 index 000000000..cf45563cc --- /dev/null +++ b/docs/examples/styles/links.py @@ -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() diff --git a/docs/styles/links.md b/docs/styles/links.md new file mode 100644 index 000000000..8188f9341 --- /dev/null +++ b/docs/styles/links.md @@ -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: ; +link-background: ; +link-style: ...; +link-hover-color: ; +link-hover-background: ; +link-hover-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. diff --git a/mkdocs.yml b/mkdocs.yml index 68aef278a..5d9fca9b6 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -68,6 +68,7 @@ nav: - "styles/layer.md" - "styles/layers.md" - "styles/layout.md" + - "styles/links.md" - "styles/margin.md" - "styles/max_height.md" - "styles/max_width.md" @@ -96,7 +97,7 @@ nav: - "widgets/input.md" - "widgets/static.md" - "widgets/tree_control.md" - - Reference: + - Reference: - "reference/app.md" - "reference/button.md" - "reference/color.md" diff --git a/src/textual/css/constants.py b/src/textual/css/constants.py index 38a718a6a..a59671753 100644 --- a/src/textual/css/constants.py +++ b/src/textual/css/constants.py @@ -32,7 +32,7 @@ VALID_BORDER: Final[set[EdgeType]] = { "wide", } VALID_EDGE: Final = {"top", "right", "bottom", "left"} -VALID_LAYOUT: Final = {"vertical", "horizontal", "center", "grid"} +VALID_LAYOUT: Final = {"vertical", "horizontal", "grid"} VALID_BOX_SIZING: Final = {"border-box", "content-box"} VALID_OVERFLOW: Final = {"scroll", "hidden", "auto"}