Layout Components

Components used to arrange other components structurally.

pymiro.components.layout

Layout components for pymiro.

Divider

Divider(
    color: str | None = None,
    thickness: int = 1,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Divider component.

Parameters:

Name	Type	Description	Default
color	str | None	Configuration for color.	None
thickness	int	Configuration for thickness.	1
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 Divider

Divider()

Source code in pymiro/components/layout.py

@component
def Divider(
    color: str | None = None,
    thickness: int = 1,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Divider component.

    Args:
        color: Configuration for color.
        thickness: Configuration for thickness.
        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 Divider

        Divider()
        ```
    """
    theme = use_theme()
    _c = color if color is not None else theme.colors.border
    props = _build_props({"thickness": thickness}, style, class_name)
    props["style"] = props.get("style", "") + f"; background-color: {_c}"
    return VNode(type="divider", props=props, children=[], key=key)

Grid

Grid(
    *children: VNode | str | None,
    cols: int = 2,
    spacing: int | None = None,
    padding: int | None = None,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Grid component.

Parameters:

Name	Type	Description	Default
cols	int	Configuration for cols.	2
spacing	int | None	Configuration for spacing.	None
padding	int | None	Configuration for padding.	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
*children	VNode | str | None	Configuration for *children.	()

Returns:

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

Example

from pymiro.components import Grid

Grid()

Source code in pymiro/components/layout.py

@component
def Grid(
    *children: VNode | str | None,
    cols: int = 2,
    spacing: int | None = None,
    padding: int | None = None,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Grid component.

    Args:
        cols: Configuration for cols.
        spacing: Configuration for spacing.
        padding: Configuration for padding.
        style: Configuration for style.
        class_name: Configuration for class_name.
        key: Configuration for key.
        *children: Configuration for *children.

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

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

        Grid()
        ```
    """
    theme = use_theme()
    _sp = spacing if spacing is not None else theme.spacing.sm
    _pd = padding if padding is not None else 0
    props = _build_props(
        {"cols": cols, "spacing": _sp, "padding": _pd}, style, class_name
    )
    valid_children = [c for c in children if c is not None]
    return VNode(type="grid", props=props, children=valid_children, key=key)

Row

Row(
    *children: VNode | str | None,
    spacing: int | None = None,
    padding: int | None = None,
    align: str = "left",
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Row component.

Parameters:

Name	Type	Description	Default
spacing	int | None	Configuration for spacing.	None
padding	int | None	Configuration for padding.	None
align	str	Configuration for align.	'left'
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
*children	VNode | str | None	Configuration for *children.	()

Returns:

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

Example

from pymiro.components import Row

Row()

Source code in pymiro/components/layout.py

@component
def Row(
    *children: VNode | str | None,
    spacing: int | None = None,
    padding: int | None = None,
    align: str = "left",
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Row component.

    Args:
        spacing: Configuration for spacing.
        padding: Configuration for padding.
        align: Configuration for align.
        style: Configuration for style.
        class_name: Configuration for class_name.
        key: Configuration for key.
        *children: Configuration for *children.

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

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

        Row()
        ```
    """
    theme = use_theme()
    _sp = spacing if spacing is not None else theme.spacing.sm
    _pd = padding if padding is not None else 0
    props = _build_props(
        {"spacing": _sp, "padding": _pd, "align": align}, style, class_name
    )
    valid_children = [c for c in children if c is not None]
    return VNode(type="row", props=props, children=valid_children, key=key)

Spacer

Spacer(
    size: int | None = None,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Spacer component.

Parameters:

Name	Type	Description	Default
size	int | None	Configuration for size.	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 Spacer

Spacer()

Source code in pymiro/components/layout.py

@component
def Spacer(
    size: int | None = None,
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Spacer component.

    Args:
        size: Configuration for size.
        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 Spacer

        Spacer()
        ```
    """
    use_theme()
    props = _build_props({}, style, class_name)
    if size is not None:
        props["style"] = (
            props.get("style", "") + f"; min-width: {size}px; min-height: {size}px"
        )
    return VNode(type="spacer", props=props, children=[], key=key)

Stack

Stack(
    *children: VNode | str | None,
    spacing: int | None = None,
    padding: int | None = None,
    align: str = "left",
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode

Renders a Stack component.

Parameters:

Name	Type	Description	Default
spacing	int | None	Configuration for spacing.	None
padding	int | None	Configuration for padding.	None
align	str	Configuration for align.	'left'
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
*children	VNode | str | None	Configuration for *children.	()

Returns:

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

Example

from pymiro.components import Stack

Stack()

Source code in pymiro/components/layout.py

@component
def Stack(
    *children: VNode | str | None,
    spacing: int | None = None,
    padding: int | None = None,
    align: str = "left",
    style: dict[str, str] | None = None,
    class_name: str | None = None,
    key: str | None = None,
) -> VNode:
    """
    Renders a Stack component.

    Args:
        spacing: Configuration for spacing.
        padding: Configuration for padding.
        align: Configuration for align.
        style: Configuration for style.
        class_name: Configuration for class_name.
        key: Configuration for key.
        *children: Configuration for *children.

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

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

        Stack()
        ```
    """
    theme = use_theme()
    _sp = spacing if spacing is not None else theme.spacing.sm
    _pd = padding if padding is not None else 0
    props = _build_props(
        {"spacing": _sp, "padding": _pd, "align": align}, style, class_name
    )
    valid_children = [c for c in children if c is not None]
    return VNode(type="stack", props=props, children=valid_children, key=key)