Navigation Components

Components for navigating between different views.

pymiro.components.navigation

Navigation components for pymiro.

Sidebar

Sidebar(
    items: list[str],
    active: int = 0,
    on_change: Callable[[int], Any] | None = None,
    width: int = 200,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Sidebar component.

Parameters:

Name	Type	Description	Default
items	list[str]	Configuration for items.	required
active	int	Configuration for active.	0
on_change	Callable[[int], Any] | None	Configuration for on_change.	None
width	int	Configuration for width.	200
style	dict[str, str] | None	Configuration for style.	None
class_name	str | None	Configuration for class_name.	None
key	str | None	Configuration for key.	None

Returns:

Name	Type	Description
VNode	VNode	The virtual DOM node representing this component.

Example

from pymiro.components import Sidebar

Sidebar()

Source code in pymiro/components/navigation.py

@component
def Sidebar(
    items: list[str],
    active: int = 0,
    on_change: Callable[[int], Any] | None = None,
    width: int = 200,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Sidebar component.

    Args:
        items: Configuration for items.
        active: Configuration for active.
        on_change: Configuration for on_change.
        width: Configuration for width.
        style: Configuration for style.
        class_name: Configuration for class_name.
        key: Configuration for key.

    Returns:
        VNode: The virtual DOM node representing this component.

    Example:
        ```python
        from pymiro.components import Sidebar

        Sidebar()
        ```
    """
    theme = use_theme()
    buttons = []
    for i, item in enumerate(items):
        is_active = i == active

        # We need to capture `i` carefully in the lambda
        def make_handler(idx: int) -> Callable[[], None]:
            def handler() -> None:
                if on_change is not None:
                    on_change(idx)

            return handler

        btn = Button(
            label=item,
            on_click=make_handler(i),
            variant="primary" if is_active else "ghost",
            full_width=True,
        )
        buttons.append(btn)

    s = {
        "min-width": f"{width}px",
        "max-width": f"{width}px",
        "background-color": theme.colors.surface,
        "border-right": f"1px solid {theme.colors.border}",
        "height": "100%",
    }
    if style:
        s.update(style)

    # We wrap in Stack
    return Stack(
        *buttons,
        spacing=theme.spacing.xs,
        padding=theme.spacing.sm,
        style=s,
        class_name=class_name,
        key=key,
    )

Tabs

Tabs(
    tabs: list[str],
    active: int = 0,
    on_change: Callable[[int], Any] | None = None,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Tabs component.

Parameters:

Name	Type	Description	Default
tabs	list[str]	Configuration for tabs.	required
active	int	Configuration for active.	0
on_change	Callable[[int], Any] | None	Configuration for on_change.	None
style	dict[str, str] | None	Configuration for style.	None
class_name	str | None	Configuration for class_name.	None
key	str | None	Configuration for key.	None

Returns:

Name	Type	Description
VNode	VNode	The virtual DOM node representing this component.

Example

from pymiro.components import Tabs

Tabs()

Source code in pymiro/components/navigation.py

@component
def Tabs(
    tabs: list[str],
    active: int = 0,
    on_change: Callable[[int], Any] | None = None,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Tabs component.

    Args:
        tabs: Configuration for tabs.
        active: Configuration for active.
        on_change: Configuration for on_change.
        style: Configuration for style.
        class_name: Configuration for class_name.
        key: Configuration for key.

    Returns:
        VNode: The virtual DOM node representing this component.

    Example:
        ```python
        from pymiro.components import Tabs

        Tabs()
        ```
    """
    use_theme()
    props = _build_props({"tabs": tabs, "active": active}, style, class_name)
    if on_change is not None:
        props["on_change"] = on_change
    return VNode(type="tabs", props=props, children=[], key=key)