Stack

In plain words

Puts things on top of each other, like sheets of paper.

Layers its children on top of each other, the last one on top: the basis of layers, modals and notifications. pz.pin(child, x=, y=) places a child at a position inside the stack.

pz.stack · Category: Layout · Full reference →

Preview

Code

t = pz.theme.current()
pz.stack([
    pz.container(width=320, height=180, bg=t.element, radius=10),
    pz.pin(pz.container(ui.label("pinned at 24, 24"), padding=10, bg=t.panel, radius=6,
                        border_color=t.border, border_width=1), x=24, y=24),
    pz.pin(ui.count_badge(3), x=290, y=8),
    pz.pin(pz.container(ui.label("on top", color="#ffffff"), padding=10, bg=t.accent, radius=6), x=150, y=110),
], width=320, height=180)

When to use

• For badges over icons, overlays, and positioning things freely.

Usage

import pyzed as pz
from pyzed import ui

t = pz.theme.current()
pz.stack([
    pz.container(width=320, height=180, bg=t.element, radius=10),
    pz.pin(pz.container(ui.label("pinned at 24, 24"), padding=10, bg=t.panel, radius=6,
                        border_color=t.border, border_width=1), x=24, y=24),
    pz.pin(ui.count_badge(3), x=290, y=8),
    pz.pin(pz.container(ui.label("on top", color="#ffffff"), padding=10, bg=t.accent, radius=6), x=150, y=110),
], width=320, height=180)

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

Layers

Code

t = pz.theme.current()
pz.stack([pz.container(width=180, height=100, bg=t.element, radius=10),
          pz.container(ui.label("on top"), center=True, width=180, height=100)])

pz.pin(x=, y=)

Code

t = pz.theme.current()
pz.stack([pz.container(width=180, height=100, bg=t.element, radius=10),
          pz.pin(ui.count_badge(3), x=150, y=8)], width=180, height=100)

Badge over an icon

Code

pz.stack([pz.container(ui.icon_button("bell", on_press, size="lg"), padding=6),
          pz.pin(ui.indicator("error", size=8), x=24, y=6)], width=40, height=40)

Events

Stack 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.stack

stack(children=None, *, width=None, height=None)

Layers its children on top of each other, the last one on top. The basis for layers, modals and notifications.

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.
width	None	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
height	None	Height: pixels, "fill", "shrink" or "fill:N" (proportion).

Full reference →

pz.pin

pin(content, *, x=0.0, y=0.0, width=None, height=None)

Places content at (x, y) inside a box. Use it in a stack to position popovers and context menus.

Property	Default	Description
content	required	Content: a Widget, a string or a number (converted to text).
x	0.0	Horizontal position.
y	0.0	Vertical position.
width	None	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
height	None	Height: pixels, "fill", "shrink" or "fill:N" (proportion).

Full reference →

Related

LayerDraws an overlay over your view; clicking outside dismisses it.

PopoverFloating content at a point: context menus, color pickers.

ContainerSize, padding, alignment, background, border and shadow for one child.