Row

In plain words

Puts things side by side, from left to right.

Lays out its children horizontally, with spacing between them and align on the cross axis. wrap=True moves children that don’t fit to the next line. Lists are flattened and None/False are skipped, so cond and widget works.

pz.row · Category: Layout · Full reference →

Preview

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.column([
    pz.row([box("A"), box("B"), box("C")], spacing=8),
    pz.row([box("Start"), pz.hspace(), box("End")], spacing=8, width=420),
    pz.row([box("tall", h=70), box("center"), box("end")], spacing=8, align="center"),
], spacing=14)

When to use

• For toolbars, button groups, form rows: anything side by side.
• Push items apart with pz.hspace() between them.

Usage

import pyzed as pz
from pyzed import ui

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.column([
    pz.row([box("A"), box("B"), box("C")], spacing=8),
    pz.row([box("Start"), pz.hspace(), box("End")], spacing=8, width=420),
    pz.row([box("tall", h=70), box("center"), box("end")], spacing=8, align="center"),
], spacing=14)

Variants

About these captures

Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site’s theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open Code under a capture to see the snippet that draws it; free names such as on_save stand for your own callbacks.

Spacing

spacing=0

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("A"), box("B"), box("C")])

spacing=8

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("A"), box("B"), box("C")], spacing=8)

spacing=24

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("A"), box("B"), box("C")], spacing=24)

Cross-axis alignment

align="start"

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("tall", h=70), box("B"), box("C")], spacing=8, align="start")

align="center"

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("tall", h=70), box("B"), box("C")], spacing=8, align="center")

align="end"

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("tall", h=70), box("B"), box("C")], spacing=8, align="end")

Options

pz.hspace()

Code

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.row([box("Start"), pz.hspace(), box("End")], width=320)

wrap=True

Code

pz.container(pz.row([ui.chip(t) for t in ["python", "rust", "iced", "desktop", "gui", "async", "themes"]],
                    spacing=6, wrap=True, line_spacing=6), width=260)

Examples

Wrapping

With wrap=True children flow onto new lines, like tags.

Preview

Code

pz.container(pz.row([ui.chip(t) for t in ["python", "rust", "iced", "zed", "desktop", "gui",
                                             "async", "themes", "canvas", "markdown"]],
                     spacing=6, wrap=True, line_spacing=6), width=360)

Events

Row has no events of its own: it shows what you give it. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Properties and API

pz.row

row(
    children=None,
    *,
    spacing=0.0,
    padding=None,
    width=None,
    height=None,
    align=None,
    clip=False,
    wrap=False,
    line_spacing=None,
)

Lays out its children horizontally.

Property	Default	Description
children	None	List of children. Nested lists are flattened and None and False are ignored, so you can write cond and widget.
spacing	0.0	Space between children, in pixels.
padding	None	Inner padding: 8, (vertical, horizontal) or (top, right, bottom, left).
width	None	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
height	None	Height: pixels, "fill", "shrink" or "fill:N" (proportion).
align	None	Alignment of the children on the cross axis: "start", "center" or "end".
clip	False	Clips content that overflows the bounds.
wrap	False	Line wrapping / moves children to a new row when they don’t fit.
line_spacing	None	Space between rows when wrap=True.

Full reference →

Related

ColumnStacks children vertically.

FlexCSS flexbox: justify, align, gap, wrap and grow.

SpaceFixed gaps and flexible spacers.