Split

Separates two widgets with a draggable divider in the theme’s border color (accent while dragging). The ratio is yours: store it in on_resize(ratio). vertical=True stacks the panes. pz.split is the base version with configurable color, hover_color, thickness and handle.

ui.split · Category: Workspace · Full reference →

Preview
Code

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)

When to use

For side-by-side editors, a preview next to its source, or an editor above a terminal.
For one resizable side panel, Resizable is simpler.

Usage

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

Variants

Direction

Events

Split has 1 event of its own, listed below. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Event	Of	Handler gets	When
`on_resize`	`ui.split`, `pz.split`	`(ratio)`	Callable that receives the new ratio.

Handler gets is what Pyzed passes to your callable: () means nothing. Any handler can also be a message (a value that is not callable), which goes to update().

Handling the events

The same events written three ways. Imperative: methods of the app change self. Declarative: the handlers produce messages and one update() decides. Functional: a pure function draws an immutable state and asks for changes with set_state(...). See Imperative, declarative and functional.

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

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)

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

Properties and API

`ui.split`

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

pz.split with the divider in the theme’s border color (accent while dragging).

Property	Default	Description
`first`	required	First pane.
`second`	required	Second pane.
`ratio`	`0.5`	Proportion of the first pane (0–1).
`vertical`	`False`	Vertical orientation.
`min_size`	`80`	Minimum size of each pane.
`theme`	`None`	Theme to use instead of the current one (`pyzed.theme.current()`).
`**kwargs`	—	Same as `pz.split`.

Events: on_resize (events).

Full reference →

`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,
)

Two panes with a draggable divider. For the theme style use ui.split.

Property	Default	Description
`first`	required	First pane.
`second`	required	Second pane.
`ratio`	`0.5`	Proportion of the first pane (0–1). The split keeps the ratio the user drags to until this changes.
`vertical`	`False`	Stacks the panes top/bottom.
`min_size`	`80.0`	Minimum size of the first pane.
`min_size_second`	`None`	Minimum size of the second pane.
`color`	`None`	Divider color.
`hover_color`	`None`	Divider color on hover or while dragging.
`thickness`	`1.0`	Line thickness.
`handle`	`8.0`	Width of the draggable area.
`width`	`None`	Width: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion).
`height`	`None`	Height: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion).