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

Update scrollbar-size rule reference.

Browse Source 
[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2023-01-05 12:02:01 +00:00
parent f457afd826
commit ffe1f4a0c4
1 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/styles/scrollbar_size.md
View File

@@ -1,19 +1,31 @@
# Scrollbar-size
The `scrollbar-size` rule changes the size of the scrollbars. It takes 2 integers for horizontal and vertical scrollbar size respectively.
The scrollbar dimensions may also be set individually with `scrollbar-size-horizontal` and `scrollbar-size-vertical`.
The `scrollbar-size` rule defines the width of the scrollbars.
## Syntax
```
scrollbar-size: <INTEGER> <INTEGER>;
```
--8<-- "docs/snippets/syntax_block_start.md"
scrollbar-size: <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a>;
# horizontal vertical
## Example
scrollbar-size-horizontal: <a href="../../css_types/integer">&lt;integer&gt;</a>;
scrollbar-size-vertical: <a href="../../css_types/integer">&lt;integer&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `scrollbar-size` rule takes two [`<integer>`](../css_types/integer.md) to set the horizontal and vertical scrollbar sizes, respectively.
This customisable size is the width of the scrollbar, given that its length will always be 100% of the container.
The scrollbar widths may also be set individually with `scrollbar-size-horizontal` and `scrollbar-size-vertical`.
## Examples
In this example we modify the size of the widget's scrollbar to be _much_ larger than usual.
=== "Output"
```{.textual path="docs/examples/styles/scrollbar_size.py"}
```
=== "scrollbar_size.py"
```python
@@ -22,28 +34,50 @@ In this example we modify the size of the widget's scrollbar to be _much_ larger
=== "scrollbar_size.css"
```css
```css hl_lines="13"
--8<-- "docs/examples/styles/scrollbar_size.css"
```
In the next example we show three containers with differently sized scrollbars.
=== "Output"
```{.textual path="docs/examples/styles/scrollbar_size.py"}
```{.textual path="docs/examples/styles/scrollbar_size2.py"}
```
=== "scrollbar_size2.py"
```python
--8<-- "docs/examples/styles/scrollbar_size2.py"
```
=== "scrollbar_size2.css"
```css hl_lines="6 11 16"
--8<-- "docs/examples/styles/scrollbar_size2.css"
```
## CSS
```sass
/* Set horizontal scrollbar to 10, and vertical scrollbar to 4 */
Widget {
scrollbar-size: 10 4;
}
scrollbar-size: 10 4;
/* Set horizontal scrollbar to 10 */
scrollbar-size-horizontal: 10;
/* Set vertical scrollbar to 4 */
scrollbar-size-vertical: 4;
```
## Python
```python
# Set horizontal scrollbar to 10, and vertical scrollbar to 4
widget.styles.horizontal_scrollbar = 10
widget.styles.vertical_scrollbar = 10
The rule `scrollbar-size` has no Python equivalent.
The scrollbar sizes must be set independently:
```py
# Set horizontal scrollbar to 10:
widget.styles.scrollbar_size_horizontal = 10
# Set vertical scrollbar to 4:
widget.styles.scrollbar_size_vertical = 4
```