Space

In plain words

Empty space: a fixed gap, or a spring that pushes things apart.

pz.space(width, height) is an empty box of a given size. pz.hspace() and pz.vspace() are flexible gaps that take the free space, pushing their siblings to the edges of a row or column.

pz.space · 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("left"), pz.hspace(), box("right")], width=440),
    pz.row([box("a"), pz.space(width=60), box("60 px later", w=140)]),
], spacing=16)

When to use

• To push actions to the right of a toolbar, or a footer to the bottom of a panel.

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("left"), pz.hspace(), box("right")], width=440),
    pz.row([box("a"), pz.space(width=60), box("60 px later", w=140)]),
], spacing=16)

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.

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("left"), pz.hspace(), box("right")], width=320)

pz.space(width=60)

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"), pz.space(width=60), box("b")])

pz.vspace()

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([box("top"), pz.vspace(), box("bottom")], height=150)

Events

Space 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.space

space(width=None, height=None)

Empty space of a given size.

Property	Default	Description
width	None	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
height	None	Height: pixels, "fill", "shrink" or "fill:N" (proportion).

Full reference →

pz.hspace

hspace(width='fill')

Flexible horizontal gap: pushes the siblings in a row towards the edges.

Property	Default	Description
width	"fill"	Width: pixels, "fill", "shrink" or "fill:N" (proportion).

Full reference →

pz.vspace

vspace(height='fill')

Flexible vertical gap: pushes the siblings in a column towards the edges.

Property	Default	Description
height	"fill"	Height: pixels, "fill", "shrink" or "fill:N" (proportion).

Full reference →

Related

RowLays out children horizontally.

ColumnStacks children vertically.

DividerA thin line in the theme's border color.