División

En pocas palabras

Dos zonas lado a lado (o una encima de otra) con una línea que arrastras para cambiar su tamaño.

Separa dos widgets con un divisor que se arrastra, en el color de borde del tema (acento mientras se arrastra). El ratio es tuyo: guárdalo en on_resize(ratio). vertical=True apila los paneles. pz.split es la versión base con color, hover_color, thickness y handle configurables.

ui.split · Categoría: Espacio de trabajo · Referencia completa →

Vista previa

Código

t = pz.theme.current()
pane = lambda title, bg: pz.container(ui.label(title), padding=12, width="fill", height="fill", bg=bg)
ui.split(pane("Left", t.panel),
         ui.split(pane("Top", t.editor), pane("Bottom", t.background), vertical=True),
         ratio=0.4, on_resize=on_resize)

Cuándo usarlo

• Para editores lado a lado, una vista previa junto a su código o un editor encima de una terminal.
• Para un solo panel lateral redimensionable, Redimensionable es más simple.

Uso

import pyzed as pz
from pyzed import ui

class Panes(pz.App):
    def __init__(self):
        self.ratio = 0.3

    def view(self):
        return ui.split(self.sidebar(), self.editor(), ratio=self.ratio,
                        on_resize=lambda r: setattr(self, "ratio", r))

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.

Dirección

Lado a lado

Código

t = pz.theme.current()
ui.split(pz.container(ui.label("A"), padding=10, width="fill", height="fill", bg=t.panel),
         pz.container(ui.label("B"), padding=10, width="fill", height="fill"), on_resize=on_resize)

vertical=True

Código

t = pz.theme.current()
ui.split(pz.container(ui.label("Top"), padding=10, width="fill", height="fill", bg=t.panel),
         pz.container(ui.label("Bottom"), padding=10, width="fill", height="fill"), vertical=True)

ratio=0.25

Código

t = pz.theme.current()
ui.split(pz.container(ui.label("25%"), padding=10, width="fill", height="fill", bg=t.panel),
         pz.container(ui.label("75%"), padding=10, width="fill", height="fill"), ratio=0.25)

Eventos

División 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	De	El handler recibe	Cuándo
on_resize	ui.split, pz.split	(ratio)	Callable que recibe la nueva proporción.

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 Panes(pz.App):
    def __init__(self):
        self.ratio = 0.3

    def view(self):
        return ui.split(ui.muted(f"Sidebar ({self.ratio:.0%})"), main_view(), ratio=self.ratio,
                        on_resize=lambda r: setattr(self, "ratio", r))   # the share of the first pane

Declarativo

from dataclasses import dataclass


@dataclass
class Ratio:
    value: float


class Panes(pz.App):
    ratio = 0.3

    def update(self, message):
        match message:
            case Ratio(value):
                self.ratio = value

    def view(self):
        return ui.split(ui.muted("Sidebar"), main_view(), ratio=self.ratio, on_resize=Ratio)

Funcional

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    ratio: float = 0.3


def view(state, set_state):
    return ui.split(ui.muted("Sidebar"), main_view(), ratio=state.ratio,
                    on_resize=lambda r: set_state(ratio=r))

Propiedades y API

ui.split

split(
    first,
    second,
    *,
    ratio=0.5,
    on_resize=None,
    vertical=False,
    min_size=80,
    theme=None,
    **kwargs,
)

pz.split con el divisor del color de borde del tema (acento al arrastrarlo).

Propiedad	Por defecto	Descripción
first	obligatorio	Primer panel.
second	obligatorio	Segundo panel.
ratio	0.5	Proporción del primero (0–1).
vertical	False	Orientación vertical.
min_size	80	Tamaño mínimo de cada panel.
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).
**kwargs	—	Los de pz.split.

Eventos: on_resize (eventos).

Referencia completa →

pz.split

split(
    first,
    second,
    *,
    ratio=0.5,
    on_resize=None,
    vertical=False,
    min_size=80.0,
    min_size_second=None,
    color=None,
    hover_color=None,
    thickness=1.0,
    handle=8.0,
    width=None,
    height=None,
)

Dos paneles con un divisor que se arrastra. Para el estilo del tema usa ui.split.

Propiedad	Por defecto	Descripción
first	obligatorio	Primer panel.
second	obligatorio	Segundo panel.
ratio	0.5	Proporción del primer panel (0–1). El divisor conserva la proporción a la que lo arrastra el usuario hasta que esto cambia.
vertical	False	Apila los paneles arriba/abajo.
min_size	80.0	Tamaño mínimo del primer panel.
min_size_second	None	Tamaño mínimo del segundo panel.
color	None	Color del divisor.
hover_color	None	Color del divisor 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 arrastrar.
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).

Eventos: on_resize (eventos).

Referencia completa →

Relacionados

RedimensionableUn panel cuyo borde se arrastra para cambiar su tamaño.

PanelUn panel lateral acoplable y redimensionable.

Espacio de trabajoLa disposición de una ventana estilo editor: barra de título, docks, centro y barra de estado.