Contenedor

En pocas palabras

Una caja alrededor de una cosa, para darle un tamaño, un margen, un fondo o un borde.

Envuelve un hijo para darle tamaño, relleno y alineación, y para dibujar un fondo (color o degradado), un borde, esquinas redondeadas y una sombra. pz.center(child) es un contenedor que centra su hijo en todo el espacio disponible.

pz.container · Categoría: Disposición · Referencia completa →

Vista previa

Código

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")

Cuándo usarlo

• Siempre que un widget necesite una caja: tarjetas, zonas de color, tamaños fijos, centrar.

Uso

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")

Variantes

Sobre estas capturas

Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre Código bajo una captura para ver el fragmento que la dibuja; los nombres libres como on_save son tus propios callbacks.

Caja

padding=, bg=

Código

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

border_color=, border_width=

Código

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

radius=999

Código

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

Pintura

gradient=

Código

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

shadow=

Código

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

Alineación

center=True

Código

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"

Código

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)

Ejemplos

Centrar

pz.center (o center=True) centra el hijo en el espacio que recibe.

Vista previa

Código

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

Eventos

Contenedor no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los 18 eventos comunes (click, double_click, right_click, mouse_enter, drag, key_down, resize…), que se conectan con .on(...): mira Eventos y Eventos de cada componente.

Propiedades y 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,
)

Envuelve un hijo para darle tamaño, alineación, fondo, borde, radio y sombra.

Propiedad	Por defecto	Descripción
content	None	El hijo (o None para una caja vacía, útil como rectángulo de color).
padding	None	Relleno interior: 8, (vertical, horizontal) o (arriba, derecha, abajo, izquierda).
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
max_width	None	Ancho máximo en píxeles.
max_height	None	Alto máximo en píxeles.
align_x	None	Alineación horizontal: "start"/"left", "center", "end"/"right".
align_y	None	Alineación vertical: "start"/"top", "center", "end"/"bottom".
center	False	Centra el contenido en ambos ejes y ocupa todo el espacio.
bg	None	Color de fondo ("#rrggbb[aa]", (r, g, b[, a]) o "transparent").
color	None	Color del texto o del icono.
border_color	None	Color del borde.
border_width	0.0	Grosor del borde en píxeles.
radius	None	Radio de las esquinas: un número o (sup_izq, sup_der, inf_der, inf_izq).
shadow	None	Sombra: (color, (dx, dy), desenfoque).
clip	False	Recorta el contenido que se sale de los límites.
gradient	None	Degradado lineal de fondo: (ángulo, [colores]) o (ángulo, [(posición, color), ...]).

Referencia completa →

pz.center

center(content, **kwargs)

Centra content en todo el espacio disponible. Equivale a container(content, center=True).

Propiedad	Por defecto	Descripción
content	obligatorio	Contenido: un Widget, un texto o un número (se convierte en texto).
**kwargs	—	Cualquier parámetro de container.

Referencia completa →

Relacionados

TarjetaUna superficie con borde, título y acciones opcionales.

PilaSuperpone los hijos; `pin` coloca uno en x, y.

FilaColoca los hijos en horizontal.