diff --git a/docs/styles/align.md b/docs/styles/align.md index eacff5740..8f299d0e3 100644 --- a/docs/styles/align.md +++ b/docs/styles/align.md @@ -1,7 +1,6 @@ # Align The `align` style aligns children within a container. -Not to be confused with [`content-align`](../content_align). ## Syntax @@ -92,3 +91,8 @@ widget.styles.align_horizontal = "right" # Change the vertical alignment of the children of a widget widget.styles.align_vertical = "middle" ``` + +## See also + + - [`content-align`](./content_align.md) to set the alignment of content inside a widget. + - [`text-align`](./text_align.md) to set the alignment of text in a widget. diff --git a/docs/styles/background.md b/docs/styles/background.md index 63ef73b55..936a350db 100644 --- a/docs/styles/background.md +++ b/docs/styles/background.md @@ -87,3 +87,7 @@ widget.styles.background = Color.parse("#FF00FF") # Set with a color object instantiated directly widget.styles.background = Color(120, 60, 100) ``` + +## See also + + - [`color`](./color.md) to set the color of text in a widget. diff --git a/docs/styles/border.md b/docs/styles/border.md index 270003f73..3b01cdfbb 100644 --- a/docs/styles/border.md +++ b/docs/styles/border.md @@ -139,3 +139,8 @@ widget.border = ("heavy", "white") # Set a red border on the left widget.border_left = ("outer", "red") ``` + +## See also + + - [`box-sizing`](./box_sizing.md) to specify how to account for the border in a widget's dimensions. + - [`outline`](./outline.md) to add an outline around the content of a widget. diff --git a/docs/styles/box_sizing.md b/docs/styles/box_sizing.md index 43ea086b4..97bc9f288 100644 --- a/docs/styles/box_sizing.md +++ b/docs/styles/box_sizing.md @@ -57,3 +57,8 @@ widget.box_sizing = "border-box" # Set box sizing to content-box widget.box_sizing = "content-box" ``` + +## See also + + - [`border`](./border.md) to add a border around a widget. + - [`padding`](./padding.md) to add spacing around the content of a widget. diff --git a/docs/styles/color.md b/docs/styles/color.md index 7c9107bfb..f4c6c5efa 100644 --- a/docs/styles/color.md +++ b/docs/styles/color.md @@ -84,3 +84,7 @@ from textual.color import Color # Set with a color object widget.styles.color = Color.parse("pink") ``` + +## See also + + - [`background`](./background.md) to set the background color in a widget. diff --git a/docs/styles/content_align.md b/docs/styles/content_align.md index e53b30667..89ae21d81 100644 --- a/docs/styles/content_align.md +++ b/docs/styles/content_align.md @@ -1,8 +1,6 @@ # Content-align The `content-align` style aligns content _inside_ a widget. -Not to be confused with [`align`](../align). - ## Syntax @@ -93,3 +91,8 @@ widget.styles.content_align_horizontal = "right" # Change the vertical alignment of the content of a widget widget.styles.content_align_vertical = "middle" ``` + +## See also + + - [`align`](./align.md) to set the alignment of children widgets inside a container. + - [`text-align`](./text_align.md) to set the alignment of text in a widget. diff --git a/docs/styles/display.md b/docs/styles/display.md index 570379347..d0d37a3c1 100644 --- a/docs/styles/display.md +++ b/docs/styles/display.md @@ -65,3 +65,7 @@ widget.display = False # Show the widget widget.display = True ``` + +## See also + + - [`visibility`](./visibility.md) to specify whether a widget is visible or not. diff --git a/docs/styles/dock.md b/docs/styles/dock.md index d8c4e1477..9fbd241ac 100644 --- a/docs/styles/dock.md +++ b/docs/styles/dock.md @@ -73,3 +73,7 @@ widget.styles.dock = left; # Dock left. widget.styles.dock = right; # Dock right. widget.styles.dock = top; # Dock top. ``` + +## See also + + - The [layout guide](../guide/layout.md#docking) section on docking. diff --git a/docs/styles/grid/column_span.md b/docs/styles/grid/column_span.md index f88de0546..bddd24d4a 100644 --- a/docs/styles/grid/column_span.md +++ b/docs/styles/grid/column_span.md @@ -46,3 +46,7 @@ column-span: 3 ```py widget.styles.column_span = 3 ``` + +## See also + + - [`row-span`](./row_span.md) to specify how many rows a widget spans. diff --git a/docs/styles/grid/grid_columns.md b/docs/styles/grid/grid_columns.md index 6ea34dfff..3c145e638 100644 --- a/docs/styles/grid/grid_columns.md +++ b/docs/styles/grid/grid_columns.md @@ -56,9 +56,13 @@ grid-columns: 50%; grid-columns: 1fr 2fr; ``` -### Python +## Python ```py grid.styles.grid_columns = "50%" grid.styles.grid_columns = "1fr 2fr" ``` + +## See also + + - [`grid-rows`](./grid_rows.md) to specify the height of the grid rows. diff --git a/docs/styles/grid/grid_rows.md b/docs/styles/grid/grid_rows.md index 94d87f856..4303a9029 100644 --- a/docs/styles/grid/grid_rows.md +++ b/docs/styles/grid/grid_rows.md @@ -56,9 +56,13 @@ grid-rows: 50%; grid-rows: 1fr 2fr; ``` -### Python +## Python ```py grid.styles.grid_rows = "50%" grid.styles.grid_rows = "1fr 2fr" ``` + +## See also + + - [`grid-columns`](./grid_columns.md) to specify the width of the grid columns. diff --git a/docs/styles/grid/index.md b/docs/styles/grid/index.md index c68172865..0236e62df 100644 --- a/docs/styles/grid/index.md +++ b/docs/styles/grid/index.md @@ -58,3 +58,7 @@ The spacing between grid cells is because of the `grid-gutter` declaration. !!! warning The properties listed on this page will only work when the layout is `grid`. + +## See also + + - The [grid layout](../../guide/layout.md#grid) guide. diff --git a/docs/styles/grid/row_span.md b/docs/styles/grid/row_span.md index a6e15c3ac..12d1670ac 100644 --- a/docs/styles/grid/row_span.md +++ b/docs/styles/grid/row_span.md @@ -49,3 +49,7 @@ row-span: 3 ```py widget.styles.row_span = 3 ``` + +## See also + + - [`column-span`](./column_span.md) to specify how many columns a widget spans. diff --git a/docs/styles/height.md b/docs/styles/height.md index 3c77d4f25..cdaec0018 100644 --- a/docs/styles/height.md +++ b/docs/styles/height.md @@ -91,3 +91,8 @@ self.styles.height = 10 # Explicit cell height can be an int self.styles.height = "50%" self.styles.height = "auto" ``` + +## See also + + - [`max-height`](./max_height.md) and [`min-height`](./min_height.md) to limit the height of a widget. + - [`width`](./width.md) to set the width of a widget. diff --git a/docs/styles/layer.md b/docs/styles/layer.md index 851a02eb3..b526fd57d 100644 --- a/docs/styles/layer.md +++ b/docs/styles/layer.md @@ -54,3 +54,8 @@ layer: below; # Draw the widget on the layer called 'below' widget.styles.layer = "below" ``` + +## See also + + - The [layout guide](../guide/layout.md#layers) section on layers. + - [`layers`](./layers.md) to define an ordered set of layers. diff --git a/docs/styles/layers.md b/docs/styles/layers.md index 518293311..bab5204d7 100644 --- a/docs/styles/layers.md +++ b/docs/styles/layers.md @@ -52,3 +52,8 @@ layers: below above; # Bottom layer is called 'below', layer above it is called 'above' widget.style.layers = ("below", "above") ``` + +## See also + + - The [layout guide](../guide/layout.md#layers) section on layers. + - [`layer`](./layer.md) to set the layer a widget belongs to. diff --git a/docs/styles/layout.md b/docs/styles/layout.md index ad0884c80..e3d937340 100644 --- a/docs/styles/layout.md +++ b/docs/styles/layout.md @@ -53,3 +53,8 @@ layout: horizontal; ```python widget.styles.layout = "horizontal" ``` + +## See also + + - [Layout guide](../guide/layout.md). + - [Grid reference](./grid/index.md). diff --git a/docs/styles/links/link_background.md b/docs/styles/links/link_background.md index e171f3fcf..9944682a6 100644 --- a/docs/styles/links/link_background.md +++ b/docs/styles/links/link_background.md @@ -59,3 +59,8 @@ widget.styles.link_background = "$accent" # You can also use a `Color` object directly: widget.styles.link_background = Color(100, 30, 173) ``` + +## See also + + - [`link-color`](./link_color.md) to set the color of link text. + - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it. diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md index 573a69631..0d38369ed 100644 --- a/docs/styles/links/link_color.md +++ b/docs/styles/links/link_color.md @@ -59,3 +59,8 @@ widget.styles.link_color = "$accent" # You can also use a `Color` object directly: widget.styles.link_color = Color(100, 30, 173) ``` + +## See also + + - [`link-background`](./link_background.md) to set the background color of link text. + - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it. diff --git a/docs/styles/links/link_hover_background.md b/docs/styles/links/link_hover_background.md index 22fd92d52..9afb7d8b6 100644 --- a/docs/styles/links/link_hover_background.md +++ b/docs/styles/links/link_hover_background.md @@ -69,3 +69,9 @@ widget.styles.link_hover_background = "$accent" # You can also use a `Color` object directly: widget.styles.link_hover_background = Color(100, 30, 173) ``` + +## See also + + - [`link-background`](./link_background.md) to set the background color of link text. + - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it. + - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it. diff --git a/docs/styles/links/link_hover_color.md b/docs/styles/links/link_hover_color.md index 026c8d264..7a9311c6c 100644 --- a/docs/styles/links/link_hover_color.md +++ b/docs/styles/links/link_hover_color.md @@ -72,3 +72,9 @@ widget.styles.link_hover_color = "black" # You can also use a `Color` object directly: widget.styles.link_hover_color = Color(100, 30, 173) ``` + +## See also + + - [`link-color`](./link_color.md) to set the color of link text. + - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it. + - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it. diff --git a/docs/styles/links/link_hover_style.md b/docs/styles/links/link_hover_style.md index 5268ead28..989c7beae 100644 --- a/docs/styles/links/link_hover_style.md +++ b/docs/styles/links/link_hover_style.md @@ -70,3 +70,10 @@ link-hover-style: bold italic reverse; widget.styles.link_hover_style = "bold" widget.styles.link_hover_style = "bold italic reverse" ``` + +## See also + + - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it. + - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it. + - [`link-style`](./link_style.md) to set the style of link text. + - [`text-style`](../text_style.md) to set the style of text in a widget. diff --git a/docs/styles/links/link_style.md b/docs/styles/links/link_style.md index 8c2eac88c..f09bfb796 100644 --- a/docs/styles/links/link_style.md +++ b/docs/styles/links/link_style.md @@ -60,3 +60,8 @@ link-style: bold italic reverse; widget.styles.link_style = "bold" widget.styles.link_style = "bold italic reverse" ``` + +## See also + + - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it. + - [`text-style`](../text_style.md) to set the style of text in a widget. diff --git a/docs/styles/margin.md b/docs/styles/margin.md index 641f9c29d..ad6b26bfd 100644 --- a/docs/styles/margin.md +++ b/docs/styles/margin.md @@ -108,3 +108,7 @@ widget.styles.margin = (2, 4) # Set margin of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left widget.styles.margin = (1, 2, 3, 4) ``` + +## See also + + - [`padding`](./padding.md) to add spacing around the content of a widget. diff --git a/docs/styles/max_height.md b/docs/styles/max_height.md index 02fb415ed..b8aa0ae2d 100644 --- a/docs/styles/max_height.md +++ b/docs/styles/max_height.md @@ -54,3 +54,8 @@ widget.styles.max_height = 10 # Set the maximum height to 25% of the viewport height widget.styles.max_height = "25vh" ``` + +## See also + + - [`min-height`](./min_height.md) to set a lower bound on the height of a widget. + - [`height`](./height.md) to set the height of a widget. diff --git a/docs/styles/max_width.md b/docs/styles/max_width.md index f0bee7ff9..944a5474a 100644 --- a/docs/styles/max_width.md +++ b/docs/styles/max_width.md @@ -54,3 +54,8 @@ widget.styles.max_width = 10 # Set the maximum width to 25% of the viewport width widget.styles.max_width = "25vh" ``` + +## See also + + - [`min-width`](./min_width.md) to set a lower bound on the width of a widget. + - [`width`](./width.md) to set the width of a widget. diff --git a/docs/styles/min_height.md b/docs/styles/min_height.md index a4e7c8c1d..a201e87aa 100644 --- a/docs/styles/min_height.md +++ b/docs/styles/min_height.md @@ -54,3 +54,8 @@ widget.styles.min_height = 10 # Set the minimum height to 25% of the viewport height widget.styles.min_height = "25vh" ``` + +## See also + + - [`max-height`](./max_height.md) to set an upper bound on the height of a widget. + - [`height`](./height.md) to set the height of a widget. diff --git a/docs/styles/min_width.md b/docs/styles/min_width.md index d07926d8e..fe23b9448 100644 --- a/docs/styles/min_width.md +++ b/docs/styles/min_width.md @@ -54,3 +54,8 @@ widget.styles.min_width = 10 # Set the minimum width to 25% of the viewport width widget.styles.min_width = "25vh" ``` + +## See also + + - [`max-width`](./max_width.md) to set an upper bound on the width of a widget. + - [`width`](./width.md) to set the width of a widget. diff --git a/docs/styles/offset.md b/docs/styles/offset.md index e09279dbd..33b546637 100644 --- a/docs/styles/offset.md +++ b/docs/styles/offset.md @@ -57,3 +57,7 @@ You have to set the two axes at the same time. # Move the widget 2 cells in the x direction, and 4 in the y direction. widget.styles.offset = (2, 4) ``` + +## See also + + - The [layout guide](../guide/layout.md#offsets) section on offsets. diff --git a/docs/styles/opacity.md b/docs/styles/opacity.md index f690054d8..481181851 100644 --- a/docs/styles/opacity.md +++ b/docs/styles/opacity.md @@ -50,3 +50,7 @@ Widget { # Fade the widget to 50% against its parent's background widget.styles.opacity = "50%" ``` + +## See also + + - [`text-opacity`](./text_opacity.md) to blend the color of a widget's content with its background color. diff --git a/docs/styles/outline.md b/docs/styles/outline.md index 7263de8e5..d0d8fa398 100644 --- a/docs/styles/outline.md +++ b/docs/styles/outline.md @@ -117,3 +117,7 @@ widget.outline = ("heavy", "white") # Set a red outline on the left widget.outline_left = ("outer", "red") ``` + +## See also + + - [`border`](./border.md) to add a border around a widget. diff --git a/docs/styles/padding.md b/docs/styles/padding.md index 38212b158..701ebf17e 100644 --- a/docs/styles/padding.md +++ b/docs/styles/padding.md @@ -83,3 +83,8 @@ widget.styles.padding = (2, 4) # Set padding of 1 on top, 2 on the right, 3 on the bottom, and 4 on the left widget.styles.padding = (1, 2, 3, 4) ``` + +## See also + + - [`box-sizing`](./box_sizing.md) to specify how to account for padding in a widget's dimensions. + - [`margin`](./margin.md) to add spacing around a widget. diff --git a/docs/styles/scrollbar_colors/scrollbar_background.md b/docs/styles/scrollbar_colors/scrollbar_background.md index 97fe18f61..bc4e9ebf8 100644 --- a/docs/styles/scrollbar_colors/scrollbar_background.md +++ b/docs/styles/scrollbar_colors/scrollbar_background.md @@ -43,3 +43,10 @@ scrollbar-backround: blue; ```py widget.styles.scrollbar_background = "blue" ``` + +## See also + + - [`scrollbar-bakcground-active`](./scrollbar_color_active.md) to set the scrollbar bakcground color when the scrollbar is being dragged. + - [`scrollbar-bakcground-hover`](./scrollbar_color_hover.md) to set the scrollbar bakcground color when the mouse pointer is over it. + - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars. + - [`scrollbar-corner-color`](./scrollbar_corner_color.md) to set the color of the corner where horizontal and vertical scrollbars meet. diff --git a/docs/styles/scrollbar_colors/scrollbar_background_active.md b/docs/styles/scrollbar_colors/scrollbar_background_active.md index 6f83a2622..6561ad1bc 100644 --- a/docs/styles/scrollbar_colors/scrollbar_background_active.md +++ b/docs/styles/scrollbar_colors/scrollbar_background_active.md @@ -44,3 +44,9 @@ scrollbar-backround-active: red; ```py widget.styles.scrollbar_background_active = "red" ``` + +## See also + + - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars. + - [`scrollbar-bakcground-hover`](./scrollbar_color_hover.md) to set the scrollbar bakcground color when the mouse pointer is over it. + - [`scrollbar-color-active`](./scrollbar_color_active.md) to set the scrollbar color when the scrollbar is being dragged. diff --git a/docs/styles/scrollbar_colors/scrollbar_background_hover.md b/docs/styles/scrollbar_colors/scrollbar_background_hover.md index fd4349f91..22628645e 100644 --- a/docs/styles/scrollbar_colors/scrollbar_background_hover.md +++ b/docs/styles/scrollbar_colors/scrollbar_background_hover.md @@ -44,3 +44,11 @@ scrollbar-background-hover: purple; ```py widget.styles.scrollbar_background_hover = "purple" ``` + +## See also + +## See also + + - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars. + - [`scrollbar-bakcground-active`](./scrollbar_color_active.md) to set the scrollbar bakcground color when the scrollbar is being dragged. + - [`scrollbar-color-hover`](./scrollbar_color_hover.md) to set the scrollbar color when the mouse pointer is over it. diff --git a/docs/styles/scrollbar_colors/scrollbar_color.md b/docs/styles/scrollbar_colors/scrollbar_color.md index 5b1bb92be..4930289d7 100644 --- a/docs/styles/scrollbar_colors/scrollbar_color.md +++ b/docs/styles/scrollbar_colors/scrollbar_color.md @@ -44,3 +44,10 @@ scrollbar-color: cyan; ```py widget.styles.scrollbar_color = "cyan" ``` + +## See also + + - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars. + - [`scrollbar-color-active`](./scrollbar_color_active.md) to set the scrollbar color when the scrollbar is being dragged. + - [`scrollbar-color-hover`](./scrollbar_color_hover.md) to set the scrollbar color when the mouse pointer is over it. + - [`scrollbar-corner-color`](./scrollbar_corner_color.md) to set the color of the corner where horizontal and vertical scrollbars meet. diff --git a/docs/styles/scrollbar_colors/scrollbar_color_active.md b/docs/styles/scrollbar_colors/scrollbar_color_active.md index 57fba7383..7be97f8b1 100644 --- a/docs/styles/scrollbar_colors/scrollbar_color_active.md +++ b/docs/styles/scrollbar_colors/scrollbar_color_active.md @@ -44,3 +44,9 @@ scrollbar-color-active: yellow; ```py widget.styles.scrollbar_color_active = "yellow" ``` + +## See also + + - [`scrollbar-bakcground-active`](./scrollbar_color_active.md) to set the scrollbar bakcground color when the scrollbar is being dragged. + - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars. + - [`scrollbar-color-hover`](./scrollbar_color_hover.md) to set the scrollbar color when the mouse pointer is over it. diff --git a/docs/styles/scrollbar_colors/scrollbar_color_hover.md b/docs/styles/scrollbar_colors/scrollbar_color_hover.md index a3fe72153..371521b05 100644 --- a/docs/styles/scrollbar_colors/scrollbar_color_hover.md +++ b/docs/styles/scrollbar_colors/scrollbar_color_hover.md @@ -44,3 +44,9 @@ scrollbar-color-hover: pink; ```py widget.styles.scrollbar_color_hover = "pink" ``` + +## See also + + - [`scrollbar-bakcground-hover`](./scrollbar_color_hover.md) to set the scrollbar bakcground color when the mouse pointer is over it. + - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars. + - [`scrollbar-color-active`](./scrollbar_color_active.md) to set the scrollbar color when the scrollbar is being dragged. diff --git a/docs/styles/scrollbar_colors/scrollbar_corner_color.md b/docs/styles/scrollbar_colors/scrollbar_corner_color.md index 05b3517c3..44b0e501d 100644 --- a/docs/styles/scrollbar_colors/scrollbar_corner_color.md +++ b/docs/styles/scrollbar_colors/scrollbar_corner_color.md @@ -42,3 +42,8 @@ scrollbar-corner-color: white; ```py widget.styles.scrollbar_corner_color = "white" ``` + +## See also + + - [`scrollbar-background`](./scrollbar_background.md) to set the background color of scrollbars. + - [`scrollbar-color`](./scrollbar_color.md) to set the color of scrollbars. diff --git a/docs/styles/text_align.md b/docs/styles/text_align.md index 851962604..37a3fc1bd 100644 --- a/docs/styles/text_align.md +++ b/docs/styles/text_align.md @@ -50,3 +50,8 @@ text-align: right; # Set text in the widget to be right aligned widget.styles.text_align = "right" ``` + +## See also + + - [`align`](./align.md) to set the alignment of children widgets inside a container. + - [`content-align`](./content_align.md) to set the alignment of content inside a widget. diff --git a/docs/styles/text_opacity.md b/docs/styles/text_opacity.md index 006d9f3de..25b26eb0f 100644 --- a/docs/styles/text_opacity.md +++ b/docs/styles/text_opacity.md @@ -47,3 +47,7 @@ text-opacity: 50%; # Set the text to be "half-faded" against the background of the widget widget.styles.text_opacity = "50%" ``` + +## See also + + - [`opacity`](./opacity.md) to specify the transparency of a whole widget. diff --git a/docs/styles/visibility.md b/docs/styles/visibility.md index 9a925a78c..62ae2ac89 100644 --- a/docs/styles/visibility.md +++ b/docs/styles/visibility.md @@ -113,3 +113,7 @@ widget.visible = False # Make the widget visible again widget.visible = True ``` + +## See also + + - [`display`](./display.md) to specify whether a widget is displayed or not. diff --git a/docs/styles/width.md b/docs/styles/width.md index 6116dda8b..a66e8ae6c 100644 --- a/docs/styles/width.md +++ b/docs/styles/width.md @@ -92,3 +92,8 @@ widget.styles.width = 10 widget.styles.width = "50% widget.styles.width = "auto" ``` + +## See also + + - [`max-width`](./max_width.md) and [`min-width`](./min_width.md) to limit the width of a widget. + - [`height`](./height.md) to set the height of a widget.