Lazy¶
marimo.lazy
¶
lazy(
element: Union[
Callable[[], object],
object,
Callable[[], Coroutine[None, None, object]],
],
show_loading_indicator: bool = False,
)
Bases: UIElement[bool, bool]
Lazy load a component until it is visible.
Use mo.lazy
to defer rendering of an item until it's visible. This is
useful for loading expensive components only when they are needed, e.g.,
only when an accordion or tab is opened.
The argument to mo.lazy
can be an object to render lazily, or a function
that returns the object to render (that is, functions are lazily
evaluated). The function can be synchronous or asynchronous.
Using a function is useful when the item to render is
the result of a database query or some other expensive operation.
Examples:
Create a lazy-loaded tab:
Create a lazy-loaded accordion:
Usage with async functions:
PARAMETER | DESCRIPTION |
---|---|
element
|
Object or callable that returns content to be lazily loaded.
TYPE:
|
show_loading_indicator
|
Whether to show a loading indicator while the content is being loaded. Defaults to False.
TYPE:
|
batch
¶
batch(**elements: UIElement[JSONType, object]) -> batch
Convert an HTML object with templated text into a UI element.
This method lets you create custom UI elements that are represented by arbitrary HTML.
Example.
user_info = mo.md(
'''
- What's your name?: {name}
- When were you born?: {birthday}
'''
).batch(name=mo.ui.text(), birthday=mo.ui.date())
In this example, user_info
is a UI Element whose output is markdown
and whose value is a dict with keys 'name'
and 'birthday
'
(and values equal to the values of their corresponding elements).
Args.
- elements: the UI elements to interpolate into the HTML template.
callout
¶
callout(
kind: Literal[
"neutral", "danger", "warn", "success", "info"
] = "neutral"
) -> Html
Create a callout containing this HTML element.
A callout wraps your HTML element in a raised box, emphasizing its
importance. You can style the callout for different situations with the
kind
argument.
Examples.
form
¶
form(
label: str = "",
*,
bordered: bool = True,
loading: bool = False,
submit_button_label: str = "Submit",
submit_button_tooltip: Optional[str] = None,
submit_button_disabled: bool = False,
clear_on_submit: bool = False,
show_clear_button: bool = False,
clear_button_label: str = "Clear",
clear_button_tooltip: Optional[str] = None,
validate: Optional[
Callable[[Optional[JSONType]], Optional[str]]
] = None,
on_change: Optional[
Callable[[Optional[T]], None]
] = None
) -> form[S, T]
Create a submittable form out of this UIElement
.
Use this method to create a form that gates the submission
of a UIElement
s value until a submit button is clicked.
The value of the form
is the value of the underlying
element the last time the form was submitted.
Examples.
Convert any UIElement
into a form:
Combine with HTML.batch
to create a form made out of multiple
UIElements
:
form = (
mo.ui.md(
'''
**Enter your prompt.**
{prompt}
**Choose a random seed.**
{seed}
'''
)
.batch(
prompt=mo.ui.text_area(),
seed=mo.ui.number(),
)
.form()
)
Args.
label
: A text label for the form.bordered
: whether the form should have a borderloading
: whether the form should be in a loading statesubmit_button_label
: the label of the submit buttonsubmit_button_tooltip
: the tooltip of the submit buttonsubmit_button_disabled
: whether the submit button should be disabledclear_on_submit
: whether the form should clear its contents after submittingshow_clear_button
: whether the form should show a clear buttonclear_button_label
: the label of the clear buttonclear_button_tooltip
: the tooltip of the clear buttonvalidate
: a function that takes the form's value and returns an error message if the value is invalid, orNone
if the value is valid
send_message
¶
Send a message to the element rendered on the frontend from the backend.