From b023b1da6da21ff23955cca52e6931c797373a70 Mon Sep 17 00:00:00 2001 From: Falko Schindler Date: Fri, 10 Jan 2025 18:07:00 +0100 Subject: [PATCH] add links --- nicegui/ui_run.py | 2 +- website/documentation/content/overview.py | 245 ++++++++++++---------- 2 files changed, 131 insertions(+), 116 deletions(-) diff --git a/nicegui/ui_run.py b/nicegui/ui_run.py index 708fd87ba..467d60536 100644 --- a/nicegui/ui_run.py +++ b/nicegui/ui_run.py @@ -88,7 +88,7 @@ def run(*, :param binding_refresh_interval: time between binding updates (default: `0.1` seconds, bigger is more CPU friendly) :param reconnect_timeout: maximum time the server waits for the browser to reconnect (default: 3.0 seconds) :param message_history_length: maximum number of messages that will be stored and resent after a connection interruption (default: 1000, use 0 to disable) - :param fastapi_docs: enable FastAPI's automatic documentation with Swagger UI, ReDoc, and OpenAPI JSON (bool or dictionary as described `here`_, default: `False`) + :param fastapi_docs: enable FastAPI's automatic documentation with Swagger UI, ReDoc, and OpenAPI JSON (bool or dictionary as described `here `_, default: `False`) :param show: automatically open the UI in a browser tab (default: `True`) :param on_air: tech preview: `allows temporary remote access `_ if set to `True` (default: disabled) :param native: open the UI in a native window of size 800x600 (default: `False`, deactivates `show`, automatically finds an open port) diff --git a/website/documentation/content/overview.py b/website/documentation/content/overview.py index 7ad92f347..d9cfbc2d4 100644 --- a/website/documentation/content/overview.py +++ b/website/documentation/content/overview.py @@ -162,6 +162,15 @@ def map_of_nicegui(): .map-of-nicegui code { font-weight: bold; } + .map-of-nicegui a code { + color: #3e6a94; + } + body.dark .map-of-nicegui a code { + color: #5898d4; + } + .map-of-nicegui a:has(code)::after { + display: none; + } ''') ui.markdown(''' This overview shows the structure of NiceGUI. @@ -173,16 +182,16 @@ def map_of_nicegui(): UI elements and other essentials to run a NiceGUI app. - - `ui.element`: base class for all UI elements + - [`ui.element`](/documentation/element): base class for all UI elements - customization: - - `.props()` and `.default_props()`: add Quasar props and regular HTML attributes - - `.classes()` and `.default_classes()`: add Quasar, Tailwind and custom HTML classes - - `.tailwind`: convenience API for adding Tailwind classes - - `.style()` and `.default_style()`: add CSS style definitions - - `.tooltip()`: add a tooltip to an element - - `.mark()`: mark an element for querying with an [ElementFilter](/documentation/element_filter) + - `.props()` and [`.default_props()`](/documentation/element#default_props): add Quasar props and regular HTML attributes + - `.classes()` and [`.default_classes()`](/documentation/element#default_classes): add Quasar, Tailwind and custom HTML classes + - [`.tailwind`](/documentation/section_styling_appearance#tailwind_css): convenience API for adding Tailwind classes + - `.style()` and [`.default_style()`](/documentation/element#default_style): add CSS style definitions + - [`.tooltip()`](/documentation/tooltip): add a tooltip to an element + - [`.mark()`](/documentation/element_filter#markers): mark an element for querying with an [ElementFilter](/documentation/element_filter) - interaction: - - `.on()`: add Python and JavaScript event handlers + - [`.on()`](/documentation/generic_events): add Python and JavaScript event handlers - `.update()`: send an update to the client (mostly done automatically) - `.run_method()`: run a method on the client side - `.get_computed_prop()`: get the value of a property that is computed on the client side @@ -193,141 +202,147 @@ def map_of_nicegui(): - `descendants`: an iterator over all child elements, grandchildren, etc. - `slots`: a dictionary of named slots - `add_slot`: fill a new slot with NiceGUI elements or a scoped slot with template strings - - `clear`: remove all child elements - - `move`: move an element to a new parent + - [`clear`](/documentation/section_page_layout#clear_containers): remove all child elements + - [`move`](/documentation/element#move_elements): move an element to a new parent - `remove`: remove a child element - `delete`: delete an element and all its children - `is_deleted`: whether an element has been deleted - elements: - - `ui.aggrid` - - `ui.audio` - - `ui.avatar` - - `ui.badge` - - `ui.button` - - `ui.button_group` - - `ui.card`, `ui.card_actions`, `ui.card_section` - - `ui.carousel`, `ui.carousel_slide` - - `ui.chat_message` - - `ui.checkbox` - - `ui.chip` - - `ui.circular_progress` - - `ui.code` - - `ui.codemirror` - - `ui.color_input` - - `ui.color_picker` - - `ui.column` - - `ui.context_menu` - - `ui.date` - - `ui.dialog` - - `ui.dropdown_button` - - `ui.echart` - - `ui.editor` - - `ui.expansion` - - `ui.grid` - - `ui.highchart` - - `ui.html` - - `ui.icon` - - `ui.image` - - `ui.input` - - `ui.interactive_image` + - [`ui.aggrid`](/documentation/aggrid) + - [`ui.audio`](/documentation/audio) + - [`ui.avatar`](/documentation/avatar) + - [`ui.badge`](/documentation/badge) + - [`ui.button`](/documentation/button) + - [`ui.button_group`](/documentation/button_group) + - [`ui.card`](/documentation/card), `ui.card_actions`, `ui.card_section` + - [`ui.carousel`](/documentation/carousel), `ui.carousel_slide` + - [`ui.chat_message`](/documentation/chat_message) + - [`ui.checkbox`](/documentation/checkbox) + - [`ui.chip`](/documentation/chip) + - [`ui.circular_progress`](/documentation/circular_progress) + - [`ui.code`](/documentation/code) + - [`ui.codemirror`](/documentation/codemirror) + - [`ui.color_input`](/documentation/color_input) + - [`ui.color_picker`](/documentation/color_picker) + - [`ui.column`](/documentation/column) + - [`ui.context_menu`](/documentation/context_menu) + - [`ui.date`](/documentation/date) + - [`ui.dialog`](/documentation/dialog) + - [`ui.dropdown_button`](/documentation/button_dropdown) + - [`ui.echart`](/documentation/echart) + - [`ui.editor`](/documentation/editor) + - [`ui.expansion`](/documentation/expansion) + - [`ui.grid`](/documentation/grid) + - [`ui.highchart`](/documentation/highchart) + - [`ui.html`](/documentation/html) + - [`ui.icon`](/documentation/icon) + - [`ui.image`](/documentation/image) + - [`ui.input`](/documentation/input) + - [`ui.interactive_image`](/documentation/interactive_image) - `ui.item`, `ui.item_label`, `ui.item_section` - - `ui.joystick` - - `ui.json_editor` - - `ui.knob` - - `ui.label` - - `ui.leaflet` - - `ui.line_plot` - - `ui.linear_progress` - - `ui.link`, `ui.link_target` - - `ui.list` - - `ui.log` - - `ui.markdown` - - `ui.matplotlib` - - `ui.menu`, `ui.menu_item` - - `ui.mermaid` - - `ui.notification` - - `ui.number` - - `ui.pagination` - - `ui.plotly` - - `ui.pyplot` - - `ui.radio` - - `ui.range` - - `ui.restructured_text` - - `ui.row` - - `ui.scene`, `ui.scene_view` - - `ui.scroll_area` - - `ui.select` - - `ui.separator` - - `ui.skeleton` - - `ui.slider` - - `ui.space` - - `ui.spinner` - - `ui.splitter` - - `ui.step`, `ui.stepper`, `ui.stepper_navigation` - - `ui.switch` - - `ui.tabs`, `ui.tab`, `ui.tab_panels`, `ui.tab_panel` - - `ui.table` - - `ui.textarea` - - `ui.time` - - `ui.timeline`, `ui.timeline_entry` - - `ui.toggle` - - `ui.tooltip` - - `ui.tree` - - `ui.upload` - - `ui.video` - - special layout elements + - [`ui.joystick`](/documentation/joystick) + - [`ui.json_editor`](/documentation/json_editor) + - [`ui.knob`](/documentation/knob) + - [`ui.label`](/documentation/label) + - [`ui.leaflet`](/documentation/leaflet) + - [`ui.line_plot`](/documentation/line_plot) + - [`ui.linear_progress`](/documentation/linear_progress) + - [`ui.link`](/documentation/link), `ui.link_target` + - [`ui.list`](/documentation/list) + - [`ui.log`](/documentation/log) + - [`ui.markdown`](/documentation/markdown) + - [`ui.matplotlib`](/documentation/matplotlib) + - [`ui.menu`](/documentation/menu), `ui.menu_item` + - [`ui.mermaid`](/documentation/mermaid) + - [`ui.notification`](/documentation/notification) + - [`ui.number`](/documentation/number) + - [`ui.pagination`](/documentation/pagination) + - [`ui.plotly`](/documentation/plotly) + - [`ui.pyplot`](/documentation/pyplot) + - [`ui.radio`](/documentation/radio) + - [`ui.range`](/documentation/range) + - [`ui.restructured_text`](/documentation/restructured_text) + - [`ui.row`](/documentation/row) + - [`ui.scene`](/documentation/scene), [`ui.scene_view`](/documentation/scene#scene_view) + - [`ui.scroll_area`](/documentation/scroll_area) + - [`ui.select`](/documentation/select) + - [`ui.separator`](/documentation/separator) + - [`ui.skeleton`](/documentation/skeleton) + - [`ui.slider`](/documentation/slider) + - [`ui.space`](/documentation/space) + - [`ui.spinner`](/documentation/spinner) + - [`ui.splitter`](/documentation/splitter) + - [`ui.stepper`](/documentation/stepper), `ui.step`, `ui.stepper_navigation` + - [`ui.switch`](/documentation/switch) + - [`ui.tabs`](/documentation/tabs), `ui.tab`, `ui.tab_panels`, `ui.tab_panel` + - [`ui.table`](/documentation/table) + - [`ui.textarea`](/documentation/textarea) + - [`ui.time`](/documentation/time) + - [`ui.timeline`](/documentation/timeline), `ui.timeline_entry` + - [`ui.toggle`](/documentation/toggle) + - [`ui.tooltip`](/documentation/tooltip) + - [`ui.tree`](/documentation/tree) + - [`ui.upload`](/documentation/upload) + - [`ui.video`](/documentation/video) + - special layout [elements](/documentation/page_layout): - `ui.header` - `ui.footer` - `ui.drawer`, `ui.left_drawer`, `ui.right_drawer` - `ui.page_sticky` - special functions and objects: - - `ui.add_body_html` and `ui.add_head_html`: add HTML to the body and head of the page - - `ui.add_css`, `ui.add_sass` and `ui.add_scss`: add CSS, SASS and SCSS to the page - - `ui.clipboard`: interact with the browser's clipboard - - `ui.colors`: define the main color theme for a page + - [`ui.add_body_html`](/documentation/section_pages_routing#add_html_to_the_page) and + [`ui.add_head_html`](/documentation/section_pages_routing#add_html_to_the_page): add HTML to the body and head of the page + - [`ui.add_css`](/documentation/add_style#add_css_style_definitions_to_the_page), + [`ui.add_sass`](/documentation/add_style#add_sass_style_definitions_to_the_page) and + [`ui.add_scss`](/documentation/add_style#add_scss_style_definitions_to_the_page): add CSS, SASS and SCSS to the page + - [`ui.clipboard`](/documentation/clipboard): interact with the browser's clipboard + - [`ui.colors`](/documentation/colors): define the main color theme for a page - `ui.context`: get the current UI context including the `client` and `request` objects - - `ui.dark_mode`: get and set the dark mode on a page - - `ui.download`: download a file to the client - - `ui.keyboard`: define keyboard event handlers - - `ui.navigate`: let the browser navigate to another location - - `ui.notify`: show a notification - - `ui.on`: register an event handler - - `ui.page_title`: change the current page title - - `ui.query`: query HTML elements on the client side to modify props, classes and style definitions - - `ui.run` and `ui.run_with`: run the app (standalone or attached to a FastAPI app) - - `ui.run_javascript`: run custom JavaScript on the client side (can use `getElement()`, `getHtmlElement()`, and `emitEvent()`) - - `ui.teleport`: teleport an element to a different location in the HTML DOM - - `ui.timer`: run a function periodically or once after a delay + - [`ui.dark_mode`](/documentation/dark_mode): get and set the dark mode on a page + - [`ui.download`](/documentation/download): download a file to the client + - [`ui.keyboard`](/documentation/keyboard): define keyboard event handlers + - [`ui.navigate`](/documentation/navigate): let the browser navigate to another location + - [`ui.notify`](/documentation/notification): show a notification + - [`ui.on`](/documentation/generic_events#custom_events): register an event handler + - [`ui.page_title`](/documentation/page_title): change the current page title + - [`ui.query`](/documentation/query): query HTML elements on the client side to modify props, classes and style definitions + - [`ui.run`](/documentation/run) and `ui.run_with`: run the app (standalone or attached to a FastAPI app) + - [`ui.run_javascript`](/documentation/run#run_custom_javascript_on_the_client_side): run custom JavaScript on the client side (can use `getElement()`, `getHtmlElement()`, and `emitEvent()`) + - [`ui.teleport`](/documentation/teleport): teleport an element to a different location in the HTML DOM + - [`ui.timer`](/documentation/timer): run a function periodically or once after a delay - `ui.update`: send updates of multiple elements to the client - decorators: - - `ui.page`: define a page (in contrast to the automatically generated "auto-index page") - - `ui.refreshable`, `ui.refreshable_method`: define refreshable UI containers (can use `ui.state`) + - [`ui.page`](/documentation/page): define a page (in contrast to the automatically generated "auto-index page") + - [`ui.refreshable`](/documentation/refreshable), `ui.refreshable_method`: define refreshable UI containers + (can use [`ui.state`](/documentation/refreshable#refreshable_ui_with_reactive_state)) #### `app` App-wide storage, mount points and lifecycle hooks. - - storage: + - [`app.storage`](/documentation/storage): - `app.storage.tab`: stored in memory on the server, unique per tab - `app.storage.client`: stored in memory on the server, unique per client connected to a page - `app.storage.user`: stored in a file on the server, unique per browser - `app.storage.general`: stored in a file on the server, shared across the entire app - `app.storage.browser`: stored in the browser's local storage, unique per browser - - lifecycle hooks: + - [lifecycle hooks](/documentation/section_action_events#events): - `app.on_connect()`: called when a client connects - `app.on_disconnect()`: called when a client disconnects - `app.on_startup()`: called when the app starts - `app.on_shutdown()`: called when the app shuts down - `app.on_exception()`: called when an exception occurs - - `app.shutdown()`: shut down the app + - [`app.shutdown()`](/documentation/section_action_events#shut_down_nicegui): shut down the app - static files: - - `app.add_static_files()`, `app.add_static_file()`: serve static files - - `app.add_media_files()`, `app.add_media_file()`: serve media files (supports streaming) - - `app.native`: configure the app when running in native mode + - [`app.add_static_files()`](/documentation/section_pages_routing#add_a_directory_of_static_files), + `app.add_static_file()`: serve static files + - [`app.add_media_files()`](/documentation/section_pages_routing#add_directory_of_media_files), + `app.add_media_file()`: serve media files (supports streaming) + - [`app.native`](/documentation/section_configuration_deployment#native_mode): configure the app when running in native mode #### `html` - Pure HTML elements: + [Pure HTML elements](/documentation/html#other_html_elements): `a`, `abbr`, @@ -442,8 +457,8 @@ def map_of_nicegui(): Run IO and CPU bound functions in separate threads and processes. - - `run.cpu_bound()`: run a CPU-bound function in a separate process - - `run.io_bound()`: run an IO-bound function in a separate thread + - [`run.cpu_bound()`](/documentation/section_action_events#running_cpu-bound_tasks): run a CPU-bound function in a separate process + - [`run.io_bound()`](/documentation/section_action_events#running_i_o-bound_tasks): run an IO-bound function in a separate thread #### `observables` @@ -458,6 +473,6 @@ def map_of_nicegui(): Write automated UI tests which run in a headless browser (slow) or fully simulated in Python (fast). - - `Screen` fixture: start a real (headless) browser to interact with your application - - `User` fixture: simulate user interaction on a Python level (fast) + - [`Screen`](/documentation/section_testing#screen_fixture) fixture: start a real (headless) browser to interact with your application + - [`User`](/documentation/section_testing#user_fixture) fixture: simulate user interaction on a Python level (fast) ''').classes('map-of-nicegui arrow-links bold-links')