# División

> Dos paneles con un divisor que se arrastra. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/split/

:::tip[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](https://albakore.github.io/pyzed/es/library/#espacio-de-trabajo) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#split)

**Código:**

```python
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](https://albakore.github.io/pyzed/es/library/resizable/) es más simple.

## Uso

```python
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

:::note[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

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

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

```python
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](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

| 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](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
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:**

```python
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:**

```python
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`

```python
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](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#split)

### `pz.split`

```python
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](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#split)

## Relacionados

- [Redimensionable](https://albakore.github.io/pyzed/es/library/resizable/): Un panel cuyo borde se arrastra para cambiar su tamaño.
- [Panel](https://albakore.github.io/pyzed/es/library/panel/): Un panel lateral acoplable y redimensionable.
- [Espacio de trabajo](https://albakore.github.io/pyzed/es/library/workspace/): La disposición de una ventana estilo editor: barra de título, docks, centro y barra de estado.