From 94cc12fc721b4ffe0cca4575ae809ebc4baef0a3 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Tue, 7 Mar 2023 10:47:02 +0000 Subject: [PATCH 1/3] Add widget gallery --- docs/widget_gallery.md | 181 +++++++++++++++++++++++++++++++++++++++++ mkdocs-nav.yml | 3 +- 2 files changed, 183 insertions(+), 1 deletion(-) create mode 100644 docs/widget_gallery.md diff --git a/docs/widget_gallery.md b/docs/widget_gallery.md new file mode 100644 index 000000000..450d06f34 --- /dev/null +++ b/docs/widget_gallery.md @@ -0,0 +1,181 @@ +--- +hide: + - navigation +--- + +# Widgets + +Welcome to the Textual widget gallery. + +We have many more widgets planned, or you can [build your own](./guide/widgets.md). + + +!!! info + + Textual is a TUI framework. Everything below runs in the *terminal*. + + +## Button + +A simple button with a variety of semantic styles. + +[Button reference](./widgets/button.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/button.py"} +``` + + +## Checkbox + +A classic checkbox widget. + +[Checkbox reference](./widgets/checkbox.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/checkbox.py"} +``` + + +## DataTable + +A versatile data table widget, with configurable cursors. + +[DataTable reference](./widgets/data_table.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/data_table.py"} +``` + +## DirectoryTree + +A tree view of files and folders. + +[DirectoryTree reference](./widgets/directory_tree.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/directory_tree.py"} +``` + +## Footer + +A footer to display and interact with key bindings. + +[Footer reference](./widgets/footer.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/footer.py"} +``` + + +## Header + +A header to display the app's title and subtitle. + + +[Header reference](./widgets/header.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/header.py"} +``` + + +## Input + +A control to enter text. + +[Input reference](./widgets/input.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/input.py" press="tab,D,a,r,r,e,n"} +``` + + +## Label + +A simple text label. + +[Label reference](./widgets/label.md){ .md-button .md-button--primary } + + +## ListView + +A widget to display a list of items. + +[ListView reference](./widgets/list_view.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/list_view.py"} +``` + +## MarkdownViewer + +Display and interact with a Markdown document (adds a table of contents and browser-like navigation to Markdown). + +[MarkdownViewer reference](./widgets/markdown_viewer.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/markdown_viewer.py" columns="100" lines="42"} +``` + +## Markdown + +Display a markdown document. + +[Markdown reference](./widgets/markdown.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/markdown.py"} +``` + + +## Placeholder + +Display placeholder content while you are designing a UI. + +[Placeholder reference](./widgets/placeholder.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/placeholder.py"} +``` + +## RadioButton + +A simple radio button. + +[RadioButton reference](./widgets/radiobutton.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/radio_button.py"} +``` + +## RadioSet + +A collection of radio buttons, that enforces uniqueness. + +[RadioSet reference](./widgets/radioset.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/radio_set.py"} +``` + + +## Switch + +A on / off control, inspired by toggle buttons. + +[Switch reference](./widgets/switch.md){ .md-button .md-button--primary } + + +```{.textual path="docs/examples/widgets/switch.py"} +``` + +## TextLog + +A widget to display text in a scrolling panel. + +[TextLog reference](./widgets/text_log.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/text_log.py" press="_,H,i"} +``` + +## Tree + +A tree control with expandable nodes. + +[Tree reference](./widgets/tree.md){ .md-button .md-button--primary } + +```{.textual path="docs/examples/widgets/tree.py"} +``` diff --git a/mkdocs-nav.yml b/mkdocs-nav.yml index 5c04332c5..3750fc9d7 100644 --- a/mkdocs-nav.yml +++ b/mkdocs-nav.yml @@ -20,7 +20,7 @@ nav: - "guide/widgets.md" - "guide/animation.md" - "guide/screens.md" - - "roadmap.md" + - "widget_gallery.md" - Reference: - "reference/index.md" - CSS Types: @@ -183,5 +183,6 @@ nav: - "api/walk.md" - "api/welcome.md" - "api/widget.md" + - "roadmap.md" - "Blog": - blog/index.md From 419e46b6686f993731076bc43e29213aa3aaf29f Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Tue, 7 Mar 2023 10:50:00 +0000 Subject: [PATCH 2/3] updated copy --- docs/widget_gallery.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/widget_gallery.md b/docs/widget_gallery.md index 450d06f34..74b24c54c 100644 --- a/docs/widget_gallery.md +++ b/docs/widget_gallery.md @@ -12,7 +12,7 @@ We have many more widgets planned, or you can [build your own](./guide/widgets.m !!! info - Textual is a TUI framework. Everything below runs in the *terminal*. + Textual is a **TUI** framework. Everything below runs in the *terminal*. ## Button @@ -27,7 +27,7 @@ A simple button with a variety of semantic styles. ## Checkbox -A classic checkbox widget. +A classic checkbox control. [Checkbox reference](./widgets/checkbox.md){ .md-button .md-button--primary } @@ -37,7 +37,7 @@ A classic checkbox widget. ## DataTable -A versatile data table widget, with configurable cursors. +A powerful data table, with configurable cursors. [DataTable reference](./widgets/data_table.md){ .md-button .md-button--primary } @@ -94,7 +94,7 @@ A simple text label. ## ListView -A widget to display a list of items. +Display a list of items (items may be other widgets). [ListView reference](./widgets/list_view.md){ .md-button .md-button--primary } @@ -164,7 +164,7 @@ A on / off control, inspired by toggle buttons. ## TextLog -A widget to display text in a scrolling panel. +Display and update text in a scrolling panel. [TextLog reference](./widgets/text_log.md){ .md-button .md-button--primary } From 1c91c3dba2ed5ae281f1ab52be2ba8bf56e081e5 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Tue, 7 Mar 2023 11:17:15 +0000 Subject: [PATCH 3/3] tweaked heights [skip ci] --- docs/widget_gallery.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/widget_gallery.md b/docs/widget_gallery.md index 74b24c54c..dc1d77af2 100644 --- a/docs/widget_gallery.md +++ b/docs/widget_gallery.md @@ -59,7 +59,7 @@ A footer to display and interact with key bindings. [Footer reference](./widgets/footer.md){ .md-button .md-button--primary } -```{.textual path="docs/examples/widgets/footer.py"} +```{.textual path="docs/examples/widgets/footer.py" columns="70" lines="12"} ``` @@ -70,7 +70,7 @@ A header to display the app's title and subtitle. [Header reference](./widgets/header.md){ .md-button .md-button--primary } -```{.textual path="docs/examples/widgets/header.py"} +```{.textual path="docs/examples/widgets/header.py" columns="70" lines="12"} ```