Responsivo

En pocas palabras

Cambia la disposición según el espacio que haya, como un móvil frente a un monitor.

Llama a function(width, height) con el espacio que recibe de verdad y muestra lo que devuelve, así la disposición se adapta: ocultar una barra lateral si la ventana es estrecha, cambiar el número de columnas…

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

Vista previa

Código

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.responsive(lambda w, h: pz.center(pz.column([
    ui.muted(f"{w:.0f} × {h:.0f} px available"),
    pz.row([box("1"), box("2"), box("3"), box("4")], spacing=8) if w > 400 else
    pz.column([box("1"), box("2")], spacing=8),
], spacing=10, align="center"))), width=480, height=150)

Cuándo usarlo

• Para disposiciones que deben funcionar en una ventana pequeña y en una grande.

Uso

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.container(pz.responsive(lambda w, h: pz.center(pz.column([
    ui.muted(f"{w:.0f} × {h:.0f} px available"),
    pz.row([box("1"), box("2"), box("3"), box("4")], spacing=8) if w > 400 else
    pz.column([box("1"), box("2")], spacing=8),
], spacing=10, align="center"))), width=480, height=150)

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.

Ancho disponible

El mismo código con dos anchos: la disposición cambia sola.

width=200

Código

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.responsive(lambda w, h: pz.row([box("1"), box("2"), box("3")], spacing=8)
             if w > 300 else pz.column([box("1"), box("2")], spacing=8)), width=200, height=110)

width=400

Código

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.responsive(lambda w, h: pz.row([box("1"), box("2"), box("3")], spacing=8)
             if w > 300 else pz.column([box("1"), box("2")], spacing=8)), width=400, height=60)

Eventos

Responsivo 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.responsive

responsive(function)

Construye su contenido con function(ancho, alto) usando el espacio realmente disponible, para que el layout se adapte (por ejemplo, ocultar una barra lateral si la ventana es estrecha).

Propiedad	Por defecto	Descripción
function	obligatorio	Función que recibe (ancho, alto) y devuelve un widget.

Referencia completa →

Relacionados

CuadrículaColumnas iguales, o pistas como en CSS con expansión.

FlexFlexbox de CSS: justify, align, gap, wrap y grow.