Accordion

Source code for examples/outputs/accordion.py

Tip: paste this code into an empty cell, and the marimo editor will create cells for you

import marimo

__generated_with = "0.19.7"
app = marimo.App()


@app.cell
def _():
    import marimo as mo

    return (mo,)


@app.cell
def _(mo):
    mo.accordion(
        {
            "Door 1": mo.md("Nothing!"),
            "Door 2": mo.md("Nothing!"),
            "Door 3": mo.md(
                "![goat](https://images.unsplash.com/photo-1524024973431-2ad916746881)"
            ),
        }
    )
    return


if __name__ == "__main__":
    app.run()

marimo.accordion

accordion(
    items: dict[str, object],
    multiple: bool = False,
    lazy: bool = False,
)

Bases: ContainerHtml

Accordion of one or more items.

PARAMETER	DESCRIPTION
items	a dictionary of item names to item content; strings are interpreted as markdown TYPE: dict[str, object]
multiple	whether to allow multiple items to be open simultaneously TYPE: bool DEFAULT: False
lazy	a boolean, whether to lazily load the accordion content. This is a convenience that wraps each accordion in a mo.lazy component. TYPE: bool DEFAULT: False

RETURNS	DESCRIPTION
	An Html object.

Example

mo.accordion(
    {"Tip": "Use accordions to let users reveal and hide content."}
)

Accordion content can be lazily loaded:

mo.accordion({"View total": expensive_item}, lazy=True)

where expensive_item is the item to render, or a callable that returns the item to render.

text property

text: str

Re-render children live on every access.

batch

batch(**elements: UIElement[Any, Any]) -> 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).

PARAMETER	DESCRIPTION
elements	the UI elements to interpolate into the HTML template. TYPE: UIElement[Any, Any] DEFAULT: {}

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:

mo.md("Hooray, you did it!").callout(kind="success")

mo.md("It's dangerous to go alone!").callout(kind="warn")

center

center() -> Html

Center an item.

Example

mo.md("# Hello, world").center()

RETURNS	DESCRIPTION
Html	An Html object.

left

left() -> Html

Left-justify.

Example

mo.md("# Hello, world").left()

RETURNS	DESCRIPTION
Html	An Html object.

right

right() -> Html

Right-justify.

Example

mo.md("# Hello, world").right()

RETURNS	DESCRIPTION
Html	An Html object.

style

style(
    style: dict[str, Any] | None = None, **kwargs: Any
) -> Html

Wrap an object in a styled container.

Example

mo.md("...").style({"max-height": "300px", "overflow": "auto"})
mo.md("...").style(max_height="300px", overflow="auto")

PARAMETER	DESCRIPTION
style	an optional dict of CSS styles, keyed by property name TYPE: dict[str, Any] | None DEFAULT: None
**kwargs	CSS styles as keyword arguments TYPE: Any DEFAULT: {}