mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Remove redundant values subsections.
[skip ci]
This commit is contained in:
@@ -21,17 +21,6 @@ To specify alignment on a single axis, use the respective style and type:
|
||||
- `align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
|
||||
- `align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
|
||||
|
||||
### Values
|
||||
|
||||
#### <horizontal>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/horizontal.md"
|
||||
|
||||
#### <vertical>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/vertical.md"
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
This example contains a simple app with two labels centered on the screen with `align: center middle;`:
|
||||
|
||||
@@ -8,18 +8,7 @@ The `background` rule sets the background color of a widget.
|
||||
background: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
The style `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
This is clamped between `0%` and `100%`.
|
||||
The style `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency (clamped between `0%` and `100%`).
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@@ -17,16 +17,6 @@ The style `border` accepts an optional [`<border>`](../../css_types/border) that
|
||||
|
||||
Borders may also be set individually for the four edges of a widget with the `border-top`, `border-right`, `border-bottom` and `border-left` rules.
|
||||
|
||||
### Values
|
||||
|
||||
#### <border>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/border.md"
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
### Multiple edge rules
|
||||
|
||||
If multiple border rules target the same edge, the last rule that targets a specific edge is the one that is applied to that edge.
|
||||
|
||||
@@ -12,18 +12,6 @@ The style `color` needs a [`<color>`](../../css_types/color) followed by an opti
|
||||
|
||||
Instead of a [`<color>`](../../css_types/color), one can use the special value `"auto"` to choose automatically the color with the best contrast for readability purposes.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
The alternative value `"auto"` picks the color that provides the best contrast for readability purposes.
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Examples
|
||||
|
||||
This example sets a different text color for each of three different widgets.
|
||||
|
||||
@@ -22,16 +22,6 @@ To specify content alignment on a single axis, use the respective style and type
|
||||
- `content-align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
|
||||
- `content-align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
|
||||
|
||||
### Values
|
||||
|
||||
#### <horizontal>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/horizontal.md"
|
||||
|
||||
#### <vertical>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/vertical.md"
|
||||
|
||||
## Examples
|
||||
|
||||
This first example shows three labels stacked vertically, each with different content alignments.
|
||||
|
||||
@@ -11,10 +11,6 @@ height: <a href="../../css_types/scalar"><scalar></a>;
|
||||
The style `height` needs a [`<scalar>`](../../css_types/scalar) to determine the vertical length of the widget.
|
||||
By default, it sets the height of the content area, but if [`box-sizing`](./box_sizing) is set to `border-box` it sets the height of the border area.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Examples
|
||||
|
||||
This examples creates a widget with a height of 50% of the screen.
|
||||
|
||||
@@ -13,10 +13,6 @@ This [`<name>`](../../css_types/name) must correspond to a [`<name>`](../../css_
|
||||
|
||||
More information on layers can be found in the [guide](../guide/layout.md#layers).
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/name.md"
|
||||
|
||||
!!! warning
|
||||
|
||||
Using a `<name>` that hasn't been defined in a [`layers`](./layers.md) declaration of an ancestor of this widget has no effect.
|
||||
|
||||
@@ -15,10 +15,6 @@ The layers defined first in the list are drawn under the layers that are defined
|
||||
|
||||
More information on layers can be found in the [guide](../guide/layout.md#layers).
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/name.md"
|
||||
|
||||
## Example
|
||||
|
||||
In the example below, `#box1` is yielded before `#box2`.
|
||||
|
||||
@@ -32,10 +32,6 @@ The number of values given defines what edges get what margin:
|
||||
|
||||
Alternatively, margin can be set for each edge individually through the rules `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`, respectively.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/integer.md"
|
||||
|
||||
## Examples
|
||||
|
||||
In the example below we add a large margin to a label, which makes it move away from the top-left corner of the screen.
|
||||
|
||||
@@ -11,10 +11,6 @@ max-height: <a href="../../css_types/scalar"><scalar></a>;
|
||||
The `max-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`height`](./height) of a widget.
|
||||
That is, the height of a widget is never allowed to exceed `max-height`.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some placeholders that were defined to span vertically from the top edge of the terminal to the bottom edge.
|
||||
|
||||
@@ -11,10 +11,6 @@ max-width: <a href="../../css_types/scalar"><scalar></a>;
|
||||
The `max-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`width`](./width) of a widget.
|
||||
That is, the width of a widget is never allowed to exceed `max-width`.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some placeholders that were defined to span horizontally from the top edge of the terminal to the bottom edge.
|
||||
|
||||
@@ -11,10 +11,6 @@ min-height: <a href="../../css_types/scalar"><scalar></a>;
|
||||
The `min-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`height`](./height) of a widget.
|
||||
That is, the height of a widget is never allowed to be under `min-height`.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some placeholders with their height set to `50%`.
|
||||
|
||||
@@ -11,10 +11,6 @@ min-width: <a href="../../css_types/scalar"><scalar></a>;
|
||||
The `min-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`width`](./width) of a widget.
|
||||
That is, the width of a widget is never allowed to be under `min-width`.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some placeholders with their width set to `50%`.
|
||||
|
||||
@@ -15,10 +15,6 @@ The two [`<scalar>`](../../css_types/scalar) in the `offset` define, respectivel
|
||||
|
||||
To specify an offset along a single axis, you can use `offset-x` and `offset-y`.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/scalar.md"
|
||||
|
||||
## Example
|
||||
|
||||
In this example, we have 3 widgets with differing offsets.
|
||||
|
||||
@@ -13,18 +13,6 @@ The opacity of a widget can be set as a [`<number>`](../css_types/number.md) or
|
||||
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
|
||||
Values outside of these ranges will be clamped.
|
||||
|
||||
### Values
|
||||
|
||||
### <number>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/number.md"
|
||||
The value of [`<number>`](../../css_types/number) is clamped between `0` and `1`.
|
||||
|
||||
### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
The value of [`<percentage>`](../../css_types/percentage) is clamped between `0%` and `100%`.
|
||||
|
||||
## Example
|
||||
|
||||
This example shows, from top to bottom, increasing opacity values for a label with a border and some text.
|
||||
|
||||
@@ -22,16 +22,6 @@ The style `outline` accepts an optional [`<border>`](../../css_types/border) tha
|
||||
Unlike the style [`border`](./border.md), the frame of the outline is drawn over the content area of the widget.
|
||||
This rule can be useful for temporary emphasis of the content of a widget, if you want to draw the user's attention to it.
|
||||
|
||||
### Values
|
||||
|
||||
#### <border>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/border.md"
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
## Examples
|
||||
|
||||
This example shows a widget with an outline. Note how the outline occludes the text area.
|
||||
|
||||
@@ -19,10 +19,6 @@ Overflow may also be set individually for each axis:
|
||||
- `overflow-x` sets the overflow for the horizontal axis; and
|
||||
- `overflow-y` sets the overflow for the vertical axis.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/overflow.md"
|
||||
|
||||
### Defaults
|
||||
|
||||
The default setting for containers is `overflow: auto auto`.
|
||||
|
||||
@@ -10,10 +10,6 @@ text-align: <a href="../../css_types/text_align"><text-align></a>;
|
||||
|
||||
The `text-align` rule accepts a value of the type [`<text-align>`](../css_types/text_align.md) that defines how text is aligned inside the widget.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/text_align.md"
|
||||
|
||||
### Defaults
|
||||
|
||||
The default value is `start`.
|
||||
|
||||
@@ -13,18 +13,6 @@ The text opacity can be set as a [`<number>`](../css_types/number.md) or a [`<pe
|
||||
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
|
||||
Values outside of these ranges will be clamped.
|
||||
|
||||
### Values
|
||||
|
||||
### <number>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/number.md"
|
||||
The value of [`<number>`](../../css_types/number) is clamped between `0` and `1`.
|
||||
|
||||
### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
The value of [`<percentage>`](../../css_types/percentage) is clamped between `0%` and `100%`.
|
||||
|
||||
## Example
|
||||
|
||||
This example shows, from top to bottom, increasing `text-opacity` values.
|
||||
|
||||
@@ -10,10 +10,6 @@ text-style: <a href="../../css_types/text_style"><text-style></a>;
|
||||
|
||||
`text-style` will take all the values specified and will apply that styling combination to the text in the widget.
|
||||
|
||||
### Values
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/text_style.md"
|
||||
|
||||
## Examples
|
||||
|
||||
Each of the three text panels has a different text style, respectively `bold`, `italic`, and `reverse`, from left to right.
|
||||
|
||||
Reference in New Issue
Block a user