Pila

En pocas palabras

Pone las cosas unas encima de otras, como hojas de papel.

Superpone sus hijos, el último encima de todos: la base de capas, modales y notificaciones. pz.pin(child, x=, y=) coloca un hijo en una posición dentro de la pila.

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

Vista previa

Código

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)

Cuándo usarlo

• Para insignias encima de iconos, capas y para colocar cosas libremente.

Uso

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)

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.

Opciones

Capas

Código

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

Código

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)

Insignia sobre un icono

Código

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)

Eventos

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

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

Superpone los hijos, el último encima. Base de capas, modales y notificaciones.

Propiedad	Por defecto	Descripción
children	None	Lista de hijos. Se aplanan listas anidadas y se ignoran None y False, así que puedes escribir cond and widget.
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).

Referencia completa →

pz.pin

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

Coloca content en (x, y) dentro de una caja. Úsalo en un stack para posicionar popovers y menús contextuales.

Propiedad	Por defecto	Descripción
content	obligatorio	Contenido: un Widget, un texto o un número (se convierte en texto).
x	0.0	Posición horizontal.
y	0.0	Posición vertical.
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).

Referencia completa →

Relacionados

CapaDibuja una capa encima de tu vista; al pulsar fuera se cierra.

PopoverContenido flotante en un punto: menús contextuales, selectores de color.

ContenedorTamaño, relleno, alineación, fondo, borde y sombra para un hijo.