From dce81254bf6f658ae13e36935c0680be2a6e6c25 Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Fri, 19 Aug 2022 14:44:25 +0100 Subject: [PATCH 1/5] Add docs for layout property --- docs/examples/styles/layout.py | 52 ++++++++++++++++++++++++++++++++++ docs/styles/layout.md | 44 ++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 docs/examples/styles/layout.py create mode 100644 docs/styles/layout.md diff --git a/docs/examples/styles/layout.py b/docs/examples/styles/layout.py new file mode 100644 index 000000000..6885a361c --- /dev/null +++ b/docs/examples/styles/layout.py @@ -0,0 +1,52 @@ +from textual import layout +from textual.app import App +from textual.widget import Widget +from textual.widgets import Static + + +class LayoutApp(App): + CSS = """ + #vertical-layout { + layout: vertical; + background: $panel; + height: auto; + } + #horizontal-layout { + layout: horizontal; + background: $panel-darken-1; + height: auto; + } + #center-layout { + layout: center; + background: $panel-darken-2; + height: 7; + } + Screen Static { + margin: 1; + width: 12; + color: $text-primary; + background: $primary; + } + """ + + def compose(self): + yield layout.Container( + Static("Layout"), + Static("Is"), + Static("Vertical"), + id="vertical-layout", + ) + yield layout.Container( + Static("Layout"), + Static("Is"), + Static("Horizontal"), + id="horizontal-layout", + ) + yield layout.Container( + Static("Center"), + id="center-layout", + ) + + +app = LayoutApp() +app.run() diff --git a/docs/styles/layout.md b/docs/styles/layout.md new file mode 100644 index 000000000..3907b304c --- /dev/null +++ b/docs/styles/layout.md @@ -0,0 +1,44 @@ +# Layout + +The `layout` property allows you to define how a widget arranges its children. + +## Syntax + +``` +layout: [vertical|horizontal|center]; +``` + +### Values + +| Value | Description | +|----------------------|-------------------------------------------------------------------------------| +| `vertical` (default) | Child widgets will be arranged along the vertical axis, from top to bottom. | +| `horizontal` | Child widgets will be arranged along the horizontal axis, from left to right. | +| `center` | A single child widget will be placed in the center. | + +## Example + +Note how the `layout` property affects the arrangement of widgets in the example below. + +=== "layout.py" + + ```python + --8<-- "docs/examples/styles/layout.py" + ``` + +=== "Output" + + ```{.textual path="docs/examples/styles/layout.py"} + ``` + +## CSS + +```sass +layout: horizontal; +``` + +## Python + +```python +widget.layout = "horizontal" +``` From 721e58ab0857feec8e7b337c3adcc171171c52fa Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Fri, 19 Aug 2022 14:46:05 +0100 Subject: [PATCH 2/5] Consistency --- docs/styles/scrollbar_gutter.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/styles/scrollbar_gutter.md b/docs/styles/scrollbar_gutter.md index d7be5f89f..0a28bb7d0 100644 --- a/docs/styles/scrollbar_gutter.md +++ b/docs/styles/scrollbar_gutter.md @@ -1,4 +1,4 @@ -# Scrollbar gutter +# Scrollbar-gutter The `scrollbar-gutter` rule allows authors to reserve space for the vertical scrollbar. From 430321684c0dc56f9711535aff3a798722166fa2 Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Fri, 19 Aug 2022 14:51:45 +0100 Subject: [PATCH 3/5] Add layout.md to docs nav index --- mkdocs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/mkdocs.yml b/mkdocs.yml index 1c85c5ba0..33d55fa19 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -21,6 +21,7 @@ nav: - "styles/min_width.md" - "styles/max_width.md" - "styles/height.md" + - "styles/layout.md" - "styles/margin.md" - "styles/offset.md" - "styles/outline.md" From a26cc3939d5aefbb52dc2640f7f47cc84c70d9fc Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Fri, 19 Aug 2022 14:52:22 +0100 Subject: [PATCH 4/5] Simplify layout docs wording --- docs/styles/layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/styles/layout.md b/docs/styles/layout.md index 3907b304c..e4c4abb0f 100644 --- a/docs/styles/layout.md +++ b/docs/styles/layout.md @@ -1,6 +1,6 @@ # Layout -The `layout` property allows you to define how a widget arranges its children. +The `layout` property defines how a widget arranges its children. ## Syntax From 4cb57bb48e64b6c359a8dd522e69bf0091ab255a Mon Sep 17 00:00:00 2001 From: Darren Burns Date: Fri, 19 Aug 2022 15:25:27 +0100 Subject: [PATCH 5/5] Split layout into separate Python and CSS files for docs example --- docs/examples/styles/layout.css | 24 ++++++++++++++++++++++++ docs/examples/styles/layout.py | 27 +-------------------------- docs/styles/layout.md | 6 ++++++ 3 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 docs/examples/styles/layout.css diff --git a/docs/examples/styles/layout.css b/docs/examples/styles/layout.css new file mode 100644 index 000000000..1b8cacd13 --- /dev/null +++ b/docs/examples/styles/layout.css @@ -0,0 +1,24 @@ +#vertical-layout { + layout: vertical; + background: darkmagenta; + height: auto; +} + +#horizontal-layout { + layout: horizontal; + background: darkcyan; + height: auto; +} + +#center-layout { + layout: center; + background: darkslateblue; + height: 7; +} + +Static { + margin: 1; + width: 12; + color: black; + background: yellowgreen; +} diff --git a/docs/examples/styles/layout.py b/docs/examples/styles/layout.py index 6885a361c..be91681f6 100644 --- a/docs/examples/styles/layout.py +++ b/docs/examples/styles/layout.py @@ -5,30 +5,6 @@ from textual.widgets import Static class LayoutApp(App): - CSS = """ - #vertical-layout { - layout: vertical; - background: $panel; - height: auto; - } - #horizontal-layout { - layout: horizontal; - background: $panel-darken-1; - height: auto; - } - #center-layout { - layout: center; - background: $panel-darken-2; - height: 7; - } - Screen Static { - margin: 1; - width: 12; - color: $text-primary; - background: $primary; - } - """ - def compose(self): yield layout.Container( Static("Layout"), @@ -48,5 +24,4 @@ class LayoutApp(App): ) -app = LayoutApp() -app.run() +app = LayoutApp(css_path="layout.css") diff --git a/docs/styles/layout.md b/docs/styles/layout.md index e4c4abb0f..65fdf7998 100644 --- a/docs/styles/layout.md +++ b/docs/styles/layout.md @@ -26,6 +26,12 @@ Note how the `layout` property affects the arrangement of widgets in the example --8<-- "docs/examples/styles/layout.py" ``` +=== "layout.css" + + ```sass + --8<-- "docs/examples/styles/layout.css" + ``` + === "Output" ```{.textual path="docs/examples/styles/layout.py"}