Redimensionable

En pocas palabras

Un panel con un borde que puedes arrastrar para hacerlo más grande o más pequeño.

Un panel cuyo edge ("left", "right", "top" o "bottom") se puede arrastrar para cambiar su tamaño, entre min_size y max_size. Conserva el tamaño que elige el usuario; on_resize(size) se llama al soltar para que puedas guardarlo.

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

Vista previa

Código

t = pz.theme.current()
pz.row([
    pz.resizable(pz.container(ui.label("Drag my right edge"), padding=12, width="fill", height="fill", bg=t.panel),
                 edge="right", size=260, min_size=160, color=t.border, hover_color=t.accent),
    pz.container(ui.muted("Content"), center=True, width="fill", height="fill"),
], height="fill")

Nuevo

Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el gestor de incidencias.

Cuándo usarlo

• Para una barra lateral o un panel inferior redimensionable junto a contenido fijo.

Uso

import pyzed as pz
from pyzed import ui

t = pz.theme.current()
pz.row([
    pz.resizable(pz.container(ui.label("Drag my right edge"), padding=12, width="fill", height="fill", bg=t.panel),
                 edge="right", size=260, min_size=160, color=t.border, hover_color=t.accent),
    pz.container(ui.muted("Content"), center=True, width="fill", height="fill"),
], height="fill")

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.

Borde

edge="right"

Código

t = pz.theme.current()
pz.row([pz.resizable(pz.container(ui.label("Sidebar"), padding=10, width="fill", height="fill", bg=t.panel),
                     edge="right", size=150, color=t.border), pz.container(width="fill")], height="fill")

edge="left"

Código

t = pz.theme.current()
pz.row([pz.container(width="fill"), pz.resizable(pz.container(ui.label("Inspector"), padding=10, width="fill",
        height="fill", bg=t.panel), edge="left", size=150, color=t.border)], height="fill")

edge="top"

Código

t = pz.theme.current()
pz.column([pz.container(height="fill"), pz.resizable(pz.container(ui.label("Console"), padding=10, width="fill",
           height="fill", bg=t.panel), edge="top", size=80, color=t.border)], width="fill")

Eventos

Redimensionable tiene 1 evento propios, en la tabla de abajo. 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.

Evento	El handler recibe	Cuándo
on_resize	(size)	Se llama con el nuevo tamaño al terminar de arrastrar.

El handler recibe es lo que Pyzed le pasa a tu función: () es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a update().

Manejar los eventos

Los mismos eventos escritos de tres formas. Imperativa: métodos de la app que cambian self. Declarativa: los handlers producen mensajes y un único update() decide. Funcional: una función pura dibuja un estado inmutable y pide cambios con set_state(...). Mira Imperativo, declarativo y funcional.

Imperativo

class Mail(pz.App):
    def __init__(self):
        self.width = 260

    def view(self):
        return pz.row([
            pz.resizable(ui.muted(f"{self.width:.0f} px"), edge="right", size=self.width, min_size=160,
                         on_resize=lambda size: setattr(self, "width", size)),   # when the drag ends
            main_view(),
        ], height="fill")

Declarativo

from dataclasses import dataclass


@dataclass
class Width:
    size: float


class Mail(pz.App):
    width = 260

    def update(self, message):
        match message:
            case Width(size):
                self.width = size

    def view(self):
        return pz.row([pz.resizable(ui.muted("Folders"), size=self.width, on_resize=Width), main_view()],
                      height="fill")

Funcional

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    width: float = 260


def view(state, set_state):
    return pz.row([pz.resizable(ui.muted("Folders"), size=state.width,
                                on_resize=lambda size: set_state(width=size)), main_view()], height="fill")

Propiedades y API

pz.resizable

resizable(
    content,
    *,
    edge='right',
    size=240.0,
    min_size=80.0,
    max_size=None,
    on_resize=None,
    color=None,
    hover_color=None,
    thickness=1.0,
    handle=8.0,
    width=None,
    height=None,
)

Un panel cuyo borde edge se arrastra para cambiar su tamaño. Conserva el tamaño al que lo arrastra el usuario; on_resize(size) se llama al terminar de arrastrar para que puedas guardarlo. Si size cambia después, vuelve a ese valor.

Propiedad	Por defecto	Descripción
content	obligatorio	El contenido del panel.
edge	"right"	El borde con el asa: "right" (una barra lateral izquierda), "left", "top" (un panel inferior) o "bottom".
size	240.0	Ancho inicial (alto con los bordes top/bottom).
min_size	80.0	Tamaño mínimo.
max_size	None	Tamaño máximo.
color	None	Color de la línea.
hover_color	None	Color de la línea al pasar el ratón o arrastrar.
thickness	1.0	Grosor de la línea.
handle	8.0	Ancho de la zona que se puede agarrar.
width	None	Ancho con los bordes top/bottom.
height	None	Alto con los bordes left/right.

Eventos: on_resize (eventos).

Referencia completa →

Relacionados

DivisiónDos paneles con un divisor que se arrastra.

PanelUn panel lateral acoplable y redimensionable.