Container

In plain words

A box around one thing, to give it a size, a margin, a background or a border.

Wraps one child to give it a size, padding and alignment, and to draw a background (color or gradient), a border, rounded corners and a shadow. pz.center(child) is a container that centers its child in all the available space.

pz.container · Category: Layout · Full reference →

Preview

Code

t = pz.theme.current()
pz.row([
    pz.container(ui.label("padding + bg"), padding=16, bg=t.element, radius=8),
    pz.container(ui.label("border"), padding=16, border_color=t.accent, border_width=2, radius=8),
    pz.container(ui.label("shadow", color="#ffffff"), padding=16, radius=12,
                 gradient=(135, ["#7c3aed", "#3b82f6"]),
                 shadow=("#00000066", (0, 6), 18)),
], spacing=16, align="center")

When to use

• Whenever a widget needs a box: cards, colored areas, fixed sizes, centering.

Usage

import pyzed as pz
from pyzed import ui

t = pz.theme.current()
pz.row([
    pz.container(ui.label("padding + bg"), padding=16, bg=t.element, radius=8),
    pz.container(ui.label("border"), padding=16, border_color=t.accent, border_width=2, radius=8),
    pz.container(ui.label("shadow", color="#ffffff"), padding=16, radius=12,
                 gradient=(135, ["#7c3aed", "#3b82f6"]),
                 shadow=("#00000066", (0, 6), 18)),
], spacing=16, align="center")

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.

Box

padding=, bg=

Code

pz.container(ui.label("padding + bg"), padding=16, bg=pz.theme.current().element, radius=8)

border_color=, border_width=

Code

pz.container(ui.label("border"), padding=16, border_color=pz.theme.current().accent,
             border_width=2, radius=8)

radius=999

Code

pz.container(ui.label("pill"), padding=(6, 16), bg=pz.theme.current().element, radius=999)

Paint

gradient=

Code

pz.container(ui.label("gradient", color="#ffffff"), padding=16, radius=10,
             gradient=(135, ["#7c3aed", "#3b82f6"]))

shadow=

Code

pz.container(ui.label("shadow"), padding=16, radius=10, bg=pz.theme.current().elevated,
             shadow=("#00000066", (0, 6), 18))

Alignment

center=True

Code

pz.container(ui.label("centered"), center=True, width=220, height=90,
             border_color=pz.theme.current().border, border_width=1, radius=8)

align_x="end", align_y="end"

Code

pz.container(ui.label("bottom right"), align_x="end", align_y="end", padding=8,
             width=220, height=90, border_color=pz.theme.current().border, border_width=1, radius=8)

Examples

Centering

pz.center (or center=True) centers the child in the space it gets.

Preview

Code

pz.container(pz.center(ui.label("centered")), width=360, height=120,
             border_color=pz.theme.current().border, border_width=1, radius=8)

Events

Container 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.container

container(
    content=None,
    *,
    padding=None,
    width=None,
    height=None,
    max_width=None,
    max_height=None,
    align_x=None,
    align_y=None,
    center=False,
    bg=None,
    color=None,
    border_color=None,
    border_width=0.0,
    radius=None,
    shadow=None,
    clip=False,
    gradient=None,
)

Wraps a child to give it size, alignment, background, border, radius and shadow.

Property	Default	Description
content	None	The child (or None for an empty box, handy as a colored rectangle).
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).
max_width	None	Maximum width in pixels.
max_height	None	Maximum height in pixels.
align_x	None	Horizontal alignment: "start"/"left", "center", "end"/"right".
align_y	None	Vertical alignment: "start"/"top", "center", "end"/"bottom".
center	False	Centers the content on both axes and fills all the space.
bg	None	Background color ("#rrggbb[aa]", (r, g, b[, a]) or "transparent").
color	None	Text or icon color.
border_color	None	Border color.
border_width	0.0	Border width in pixels.
radius	None	Corner radius: a number or (top_left, top_right, bottom_right, bottom_left).
shadow	None	Shadow: (color, (dx, dy), blur).
clip	False	Clips content that overflows the bounds.
gradient	None	Linear background gradient: (angle, [colors]) or (angle, [(position, color), ...]).

Full reference →

pz.center

center(content, **kwargs)

Centers content in all the available space. Equivalent to container(content, center=True).

Property	Default	Description
content	required	Content: a Widget, a string or a number (converted to text).
**kwargs	—	Any container parameter.

Full reference →

Related

CardA bordered surface with an optional title and actions.

StackLayers children on top of each other; `pin` places one at x, y.

RowLays out children horizontally.