Column

In plain words

Puts things one under the other, from top to bottom.

Stacks its children vertically, with spacing, padding, align on the cross axis and an optional max_width. Like row, nested lists are flattened and None/False are ignored.

pz.column · 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.row([
    pz.column([box("1"), box("2"), box("3")], spacing=8),
    pz.column([box("wide", w=160), box("center"), box("end")], spacing=8, align="center"),
    pz.column([box("top"), pz.vspace(), box("bottom")], spacing=8, height=170),
], spacing=32)

When to use

• For forms, lists, page content and most view() roots.

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.row([
    pz.column([box("1"), box("2"), box("3")], spacing=8),
    pz.column([box("wide", w=160), box("center"), box("end")], spacing=8, align="center"),
    pz.column([box("top"), pz.vspace(), box("bottom")], spacing=8, height=170),
], spacing=32)

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.

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.column([box("wide", w=160), 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.column([box("wide", w=160), 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.column([box("wide", w=160), box("B"), box("C")], spacing=8, align="end")

Options

spacing=16

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("1"), box("2")], spacing=16)

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=170)

padding=16

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.container(pz.column([box("1"), box("2")], spacing=8, padding=16),
             border_color=pz.theme.current().border, border_width=1, radius=8)

Events

Column 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.column

column(
    children=None,
    *,
    spacing=0.0,
    padding=None,
    width=None,
    height=None,
    align=None,
    max_width=None,
    clip=False,
)

Stacks its children vertically.

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".
max_width	None	Maximum width in pixels.
clip	False	Clips content that overflows the bounds.

Full reference →

Related

RowLays out children horizontally.

ScrollableScrolls content that doesn't fit.

SpaceFixed gaps and flexible spacers.