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

Complete border reference.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-15 16:16:21 +00:00
parent e70f271afc
commit 4897b9d1b7
1 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
docs/styles/border.md
View File

@@ -1,50 +1,77 @@
# Border # Border
The `border` rule enables the drawing of a box around a widget. A border is set with a border value (see below) followed by a color. The `border` rule enables the drawing of a box around a widget. A border is set with a border type (see below) and a color.
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. 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.
## Syntax ## Syntax
``` ```
border: [<COLOR>] [<BORDER VALUE>]; border: [<BORDER TYPE>] [<COLOR>];
border-top: [<COLOR>] [<BORDER VALUE>]; border-top: [<BORDER TYPE>] [<COLOR>];
border-right: [<COLOR>] [<BORDER VALUE>]; border-right: [<BORDER TYPE>] [<COLOR>];
border-bottom: [<COLOR>] [<BORDER VALUE>]; border-bottom: [<BORDER TYPE>] [<COLOR>];
border-left: [<COLOR>] [<BORDER VALUE>]; border-left: [<BORDER TYPE>] [<COLOR>];
``` ```
### Values ### Border types
| Border value | Description | | Border type | Description |
|--------------|---------------------------------------------------------| |-------------|---------------------------------------------------------|
| `"ascii"` | A border with plus, hyphen, and vertical bar | | `"ascii"` | A border with plus, hyphen, and vertical bar characters |
| `"blank"` | A blank border (reserves space for a border) | | `"blank"` | A blank border (reserves space for a border) |
| `"dashed"` | Dashed line border | | `"dashed"` | Dashed line border |
| `"double"` | Double lined border | | `"double"` | Double lined border |
| `"heavy"` | Heavy border | | `"heavy"` | Heavy border |
| `"hidden"` | Alias for "none" | | `"hidden"` | Alias for "none" |
| `"hkey"` | Horizontal key-line border | | `"hkey"` | Horizontal key-line border |
| `"inner"` | Thick solid border | | `"inner"` | Thick solid border |
| `"none"` | Disabled border | | `"none"` | Disabled border |
| `"outer"` | Think solid border with additional space around content | | `"outer"` | Solid border with additional space around content |
| `"round"` | Rounded corners | | `"round"` | Rounded corners |
| `"solid"` | Solid border | | `"solid"` | Solid border |
| `"tall"` | Solid border with extras space top and bottom | | `"tall"` | Solid border with extras space top and bottom |
| `"vkey"` | Vertical key-line border | | `"vkey"` | Vertical key-line border |
| `"wide"` | Solid border with additional space left and right | | `"wide"` | Solid border with additional space left and right |
For example, `heavy white` would display a heavy white line around a widget. For example, `heavy white` would display a heavy white line around a widget.
### Color syntax
--8<-- "docs/styles/snippets/color_css_syntax.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.
For example, consider the CSS below:
```sass
Static {
border-top: dashed red;
border: solid green; /* overrides the border-top rule above */
/* Change the border but just for the bottom edge: */
border-bottom: double blue;
}
```
The CSS snippet above will add a solid green border around `Static` widgets, except for the bottom edge, which will be double blue.
### Defaults
If a border color is specified but the border type is omitted, it defaults to solid.
If a border type is specified but the border color is omitted, it defaults to green (RGB color `"#00FF00"`).
## Border command ## Border command
The `textual` CLI has a subcommand which will let you explore the various border types: The `textual` CLI has a subcommand which will let you explore the various border types interactively:
``` ```
textual borders textual borders
``` ```
## Example Alternatively, you can see the examples below.
## Examples
This examples shows three widgets with different border styles. This examples shows three widgets with different border styles.
@@ -65,6 +92,25 @@ This examples shows three widgets with different border styles.
```{.textual path="docs/examples/styles/border.py"} ```{.textual path="docs/examples/styles/border.py"}
``` ```
The next example shows a grid with all the available border types.
=== "border_all.py"
```py
--8<-- "docs/examples/styles/border_all.py"
```
=== "border_all.css"
```css
--8<-- "docs/examples/styles/border_all.css"
```
=== "Output"
```{.textual path="docs/examples/styles/border_all.py"}
```
## CSS ## CSS
```sass ```sass