# Desplegable

> Una sección plegable con flecha. 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/disclosure/

:::tip[En pocas palabras]
Una sección con una flechita que muestra u oculta detalles extra.
:::

Una cabecera con una flecha que muestra u oculta `content`. El estado abierto es tuyo: cámbialo en `on_toggle`.

`ui.disclosure` · Categoría: [Listas y menús](https://albakore.github.io/pyzed/es/library/#listas-y-menús) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#disclosure)

**Código:**

```python
pz.column([
    ui.disclosure("Advanced options", ui.muted("Shown while the section is open."), open=True,
                  on_toggle=on_toggle),
    ui.disclosure("Environment variables", ui.muted("Hidden"), open=False, on_toggle=on_toggle,
                  end=ui.badge("3")),
], spacing=10, width=380)
```

## Cuándo usarlo

- Para esconder opciones avanzadas o detalles hasta que hagan falta.

## Uso

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

class Form(pz.App):
    def __init__(self):
        self.advanced = False

    def view(self):
        return ui.disclosure("Advanced options", self.advanced_options(), open=self.advanced,
                             on_toggle=lambda: setattr(self, "advanced", not self.advanced))
```

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

### Estado

```python
pz.container(ui.disclosure("Advanced options", ui.muted("…"), open=False, on_toggle=on_toggle), width=300)
```

```python
pz.container(ui.disclosure("Advanced options", ui.muted("Shown while open."), open=True,
                           on_toggle=on_toggle), width=300)
```

```python
pz.container(ui.disclosure("Environment", ui.muted("…"), open=False, on_toggle=on_toggle,
                           end=ui.badge("3")), width=300)
```

## Eventos

Desplegable 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_toggle` | `()` | Mensaje o callable al pulsar la cabecera. |

**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 Form(pz.App):
    def __init__(self):
        self.advanced = False

    def view(self):
        return ui.disclosure("Advanced options", ui.muted("Proxy, timeouts…"), open=self.advanced,
                             on_toggle=lambda: setattr(self, "advanced", not self.advanced))  # no argument
```

**Declarativo:**

```python
class Form(pz.App):
    advanced = False

    def update(self, message):
        if message == "toggle advanced":
            self.advanced = not self.advanced

    def view(self):
        return ui.disclosure("Advanced options", ui.muted("…"), open=self.advanced,
                             on_toggle="toggle advanced")
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    advanced: bool = False

def view(state, set_state):
    return ui.disclosure("Advanced options", ui.muted("…"), open=state.advanced,
                         on_toggle=lambda: set_state(advanced=not state.advanced))
```

## Propiedades y API

### `ui.disclosure`

```python
disclosure(title, content, *, open, on_toggle=None, end=None, theme=None)
```

Una sección plegable: cabecera con flecha que muestra u oculta `content`. El estado abierto es tuyo: cámbialo en `on_toggle`.

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `title` | *obligatorio* | Título (texto o widget). |
| `content` | *obligatorio* | Contenido. |
| `open` | *obligatorio* | Si está abierta. |
| `end` | `None` | Widgets al final (derecha). |
| `theme` | `None` | Tema a usar en lugar del actual (`pyzed.theme.current()`). |

Eventos: `on_toggle` ([eventos](#eventos)).

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

## Relacionados

- [Acordeón](https://albakore.github.io/pyzed/es/library/accordion/): Secciones plegables apiladas, como los paneles de una pantalla de ajustes.
- [Tarjeta](https://albakore.github.io/pyzed/es/library/card/): Una superficie con borde, título y acciones opcionales.