|
@@ -164,6 +164,11 @@
|
|
|
"content": "create a custom binding for a label with a bindable background color",
|
|
|
"url": "https://github.com/zauberzeug/nicegui/tree/main/examples/custom_binding/main.py"
|
|
|
},
|
|
|
+ {
|
|
|
+ "title": "Example: Descope Auth",
|
|
|
+ "content": "login form and user profile using [Descope](https://descope.com)",
|
|
|
+ "url": "https://github.com/zauberzeug/nicegui/tree/main/examples/descope_auth/main.py"
|
|
|
+ },
|
|
|
{
|
|
|
"title": "Basic Elements",
|
|
|
"content": "This is **Markdown**.",
|
|
@@ -239,6 +244,16 @@
|
|
|
"content": "Most elements also support asynchronous event handlers. Note: You can also pass a functools.partial into the on_click property to wrap async functions with parameters.",
|
|
|
"url": "/documentation/#async_event_handlers"
|
|
|
},
|
|
|
+ {
|
|
|
+ "title": "Running CPU-bound tasks",
|
|
|
+ "content": "NiceGUI provides a cpu_bound function for running CPU-bound tasks in a separate process. This is useful for long-running computations that would otherwise block the event loop and make the UI unresponsive. The function returns a future that can be awaited.",
|
|
|
+ "url": "/documentation/#running_cpu-bound_tasks"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "Running I/O-bound tasks",
|
|
|
+ "content": "NiceGUI provides an io_bound function for running I/O-bound tasks in a separate thread. This is useful for long-running I/O operations that would otherwise block the event loop and make the UI unresponsive. The function returns a future that can be awaited.",
|
|
|
+ "url": "/documentation/#running_i/o-bound_tasks"
|
|
|
+ },
|
|
|
{
|
|
|
"title": "Action",
|
|
|
"content": "Overview",
|
|
@@ -321,7 +336,7 @@
|
|
|
},
|
|
|
{
|
|
|
"title": "Environment Variables",
|
|
|
- "content": "You can set the following environment variables to configure NiceGUI: - MATPLOTLIB (default: true) can be set to false to avoid the potentially costly import of Matplotlib. This will make ui.pyplot and ui.line_plot unavailable. - NICEGUI_STORAGE_PATH (default: local \".nicegui\") can be set to change the location of the storage files. - MARKDOWN_CONTENT_CACHE_SIZE (default: 1000): The maximum number of Markdown content snippets that are cached in memory.",
|
|
|
+ "content": "You can set the following environment variables to configure NiceGUI: - MATPLOTLIB (default: true) can be set to false to avoid the potentially costly import of Matplotlib. This will make ui.pyplot and ui.line_plot unavailable. - NICEGUI_STORAGE_PATH (default: local \".nicegui\") can be set to change the location of the storage files. - MARKDOWN_CONTENT_CACHE_SIZE (default: 1000): The maximum number of Markdown content snippets that are cached in memory. - NO_NETIFACES (default: false): Can be set to true to hide the netifaces startup warning (e.g. in docker container).",
|
|
|
"url": "/documentation/#environment_variables"
|
|
|
},
|
|
|
{
|
|
@@ -364,6 +379,11 @@
|
|
|
"content": "You can also use Lottie files with animations.",
|
|
|
"url": "/documentation/icon#lottie_files"
|
|
|
},
|
|
|
+ {
|
|
|
+ "title": "Code",
|
|
|
+ "content": "This element displays a code block with syntax highlighting. :param content: code to display :param language: language of the code (default: \"python\") copy_to_clipboard",
|
|
|
+ "url": "/documentation/code"
|
|
|
+ },
|
|
|
{
|
|
|
"title": "Download",
|
|
|
"content": "Function to trigger the download of a file. :param src: target URL or local path of the file which should be downloaded :param filename: name of the file to download (default: name of the file on the server)",
|
|
@@ -636,7 +656,7 @@
|
|
|
},
|
|
|
{
|
|
|
"title": "Menu: Custom Context Menu",
|
|
|
- "content": "Using Quasar's context-menu and touch-position props, you can create custom context menus.",
|
|
|
+ "content": "Using Quasar's context-menu and touch-position props, you can create custom context menus. These open by right-clicking on the parent.",
|
|
|
"url": "/documentation/menu#custom_context_menu"
|
|
|
},
|
|
|
{
|
|
@@ -659,6 +679,11 @@
|
|
|
"content": "The options can be specified as a list of values, or as a dictionary mapping values to labels. After manipulating the options, call update() to update the options in the UI. :param options: a list ['value1', ...] or dictionary 'value1':'label1', ... specifying the options :param value: the initial value :param on_change: callback to execute when selection changes :param clearable: whether the toggle can be cleared by clicking the selected option",
|
|
|
"url": "/documentation/toggle"
|
|
|
},
|
|
|
+ {
|
|
|
+ "title": "Editor",
|
|
|
+ "content": "A WYSIWYG editor based on Quasar's QEditor <https://quasar.dev/vue-components/editor>_. The value is a string containing the formatted text as HTML code. :param value: initial value :param on_change: callback to be invoked when the value changes",
|
|
|
+ "url": "/documentation/editor"
|
|
|
+ },
|
|
|
{
|
|
|
"title": "Keyboard",
|
|
|
"content": "Adds global keyboard event tracking. :param on_key: callback to be executed when keyboard events occur. :param active: boolean flag indicating whether the callback should be executed or not (default: True) :param repeating: boolean flag indicating whether held keys should be sent repeatedly (default: True) :param ignore: ignore keys when one of these element types is focussed (default: ['input', 'select', 'button', 'textarea']) handle_key",
|
|
@@ -839,6 +864,11 @@
|
|
|
"content": ":param label: displayed label for the color input :param placeholder: text to show if no color is selected :param value: the current color value :param on_change: callback to execute when the value changes :param preview: change button background to selected color (default: False) open_picker Open the color pickeron_value_change",
|
|
|
"url": "/documentation/color_input"
|
|
|
},
|
|
|
+ {
|
|
|
+ "title": "Timeline",
|
|
|
+ "content": "This element represents Quasar's QTimeline <https://quasar.dev/vue-components/timeline#qtimeline-api>_ component. :param side: Side (\"left\" or \"right\"; default: \"left\"). :param layout: Layout (\"dense\", \"comfortable\" or \"loose\"; default: \"dense\"). :param color: Color of the icons.",
|
|
|
+ "url": "/documentation/timeline"
|
|
|
+ },
|
|
|
{
|
|
|
"title": "Textarea",
|
|
|
"content": "This element is based on Quasar's QInput <https://quasar.dev/vue-components/input>_ component. The `type is set to textarea to create a multi-line text input. You can use the validation parameter to define a dictionary of validation rules. The key of the first rule that fails will be displayed as an error message. :param label: displayed name for the textarea :param placeholder: text to show if no value is entered :param value: the initial value of the field :param on_change: callback to execute when the value changes :param validation: dictionary of validation rules, e.g. 'Too long!': lambda value: len(value) < 3`",
|
|
@@ -1041,9 +1071,19 @@
|
|
|
},
|
|
|
{
|
|
|
"title": "Apache EChart",
|
|
|
- "content": "An element to create a chart using ECharts <https://echarts.apache.org/>_. Updates can be pushed to the chart by changing the options property. After data has changed, call the update method to refresh the chart. :param options: dictionary of EChart options update",
|
|
|
+ "content": "An element to create a chart using ECharts <https://echarts.apache.org/>_. Updates can be pushed to the chart by changing the options property. After data has changed, call the update method to refresh the chart. :param options: dictionary of EChart options :param on_click_point: callback function that is called when a point is clicked update",
|
|
|
"url": "/documentation/echart"
|
|
|
},
|
|
|
+ {
|
|
|
+ "title": "Echart: EChart with clickable points",
|
|
|
+ "content": "You can register a callback for an event when a series point is clicked.",
|
|
|
+ "url": "/documentation/echart#echart_with_clickable_points"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "title": "Echart: EChart with dynamic properties",
|
|
|
+ "content": "Dynamic properties can be passed to chart elements to customize them such as apply an axis label format. To make a property dynamic, prefix a colon \":\" to the property name.",
|
|
|
+ "url": "/documentation/echart#echart_with_dynamic_properties"
|
|
|
+ },
|
|
|
{
|
|
|
"title": "Generic Events",
|
|
|
"content": "Most UI elements come with predefined events. For example, a ui.button like \"A\" in the demo has an on_click parameter that expects a coroutine or function. But you can also use the on method to register a generic event handler like for \"B\". This allows you to register handlers for any event that is supported by JavaScript and Quasar. For example, you can register a handler for the mousemove event like for \"C\", even though there is no on_mousemove parameter for ui.button. Some events, like mousemove, are fired very often. To avoid performance issues, you can use the throttle parameter to only call the handler every throttle seconds (\"D\"). The generic event handler can be synchronous or asynchronous and optionally takes GenericEventArguments as argument (\"E\"). You can also specify which attributes of the JavaScript or Quasar event should be passed to the handler (\"F\"). This can reduce the amount of data that needs to be transferred between the server and the client. Here you can find more information about the events that are supported: - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#events for HTML elements - https://quasar.dev/vue-components for Quasar-based elements (see the \"Events\" tab on the individual component page)",
|