# Responsivo

> Construye su contenido según el espacio disponible. 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/responsive/

:::tip[En pocas palabras]
Cambia la disposición según el espacio que haya, como un móvil frente a un monitor.
:::

Llama a `function(width, height)` con el espacio que recibe de verdad y muestra lo que devuelve, así la disposición se adapta: ocultar una barra lateral si la ventana es estrecha, cambiar el número de columnas…

`pz.responsive` · Categoría: [Disposición](https://albakore.github.io/pyzed/es/library/#disposición) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#responsive)

**Código:**

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.responsive(lambda w, h: pz.center(pz.column([
    ui.muted(f"{w:.0f} × {h:.0f} px available"),
    pz.row([box("1"), box("2"), box("3"), box("4")], spacing=8) if w > 400 else
    pz.column([box("1"), box("2")], spacing=8),
], spacing=10, align="center"))), width=480, height=150)
```

## Cuándo usarlo

- Para disposiciones que deben funcionar en una ventana pequeña y en una grande.

## Uso

```python
import pyzed as pz
from pyzed import ui

box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.responsive(lambda w, h: pz.center(pz.column([
    ui.muted(f"{w:.0f} × {h:.0f} px available"),
    pz.row([box("1"), box("2"), box("3"), box("4")], spacing=8) if w > 400 else
    pz.column([box("1"), box("2")], spacing=8),
], spacing=10, align="center"))), width=480, height=150)
```

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

### Ancho disponible

El mismo código con dos anchos: la disposición cambia sola.

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.responsive(lambda w, h: pz.row([box("1"), box("2"), box("3")], spacing=8)
             if w > 300 else pz.column([box("1"), box("2")], spacing=8)), width=200, height=110)
```

```python
box = lambda text, w=90, h=44: pz.container(ui.label(text), center=True, width=w, height=h, bg=pz.theme.current().element, radius=6)
pz.container(pz.responsive(lambda w, h: pz.row([box("1"), box("2"), box("3")], spacing=8)
             if w > 300 else pz.column([box("1"), box("2")], spacing=8)), width=400, height=60)
```

## Eventos

Responsivo no tiene eventos propios: muestra lo que le das. 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/).

## Propiedades y API

### `pz.responsive`

```python
responsive(function)
```

Construye su contenido con `function(ancho, alto)` usando el espacio realmente disponible, para que el layout se adapte (por ejemplo, ocultar una barra lateral si la ventana es estrecha).

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `function` | *obligatorio* | Función que recibe `(ancho, alto)` y devuelve un widget. |

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

## Relacionados

- [Cuadrícula](https://albakore.github.io/pyzed/es/library/grid/): Columnas iguales, o pistas como en CSS con expansión.
- [Flex](https://albakore.github.io/pyzed/es/library/flex/): Flexbox de CSS: justify, align, gap, wrap y grow.