# Redimensionable

> Un panel cuyo borde se arrastra para cambiar su tamaño. 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/resizable/

:::tip[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](https://albakore.github.io/pyzed/es/library/#disposición) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#resizable)

**Código:**

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

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

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

## Uso

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

:::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.
:::

### Borde

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

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

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

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

**Imperativo:**

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

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

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

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

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

## Relacionados

- [División](https://albakore.github.io/pyzed/es/library/split/): Dos paneles con un divisor que se arrastra.
- [Panel](https://albakore.github.io/pyzed/es/library/panel/): Un panel lateral acoplable y redimensionable.