# Capa de diálogo

> Centra un diálogo encima de tu vista con el fondo oscurecido. Componente de Pyzed para GUIs de escritorio en Python, con ejemplos y API.

Source: https://albakore.github.io/pyzed/es/library/dialog-layer/

:::tip[En pocas palabras]
Oscurece la app y muestra un diálogo en el centro, para que la pregunta no pase desapercibida.
:::

Muestra un diálogo centrado encima de `base` con el fondo oscurecido; al pulsar el fondo se llama a `on_dismiss`. Con `dialog=None` devuelve `base` sin cambios, así que guarda en tu estado qué diálogo está abierto y envuelve siempre la vista con ella.

`ui.dialog_layer` · Categoría: [Diálogos](https://albakore.github.io/pyzed/es/library/#diálogos) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#dialog_layer)

**Código:**

```python
ui.dialog_layer(
    main_view(),
    ui.confirm("Delete notes.py? This can't be undone.", on_delete, on_cancel,
               title="Delete file", danger=True, width=340),
    on_dismiss=on_cancel,
)
```

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

- Alrededor de toda tu vista, para mostrar cualquiera de estos diálogos o un `ui.modal`.

## Uso

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

class Files(pz.App):
    def __init__(self):
        self.asking = False

    def close(self):
        self.asking = False

    def view(self):
        dialog = None
        if self.asking:
            dialog = ui.confirm("Delete main.py?", self.delete, self.close, title="Delete file", danger=True)
        return ui.dialog_layer(self.main_view(), dialog, on_dismiss=self.close)
```

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

### Diálogo

```python
ui.dialog_layer(main_view(), ui.alert("Export finished.", on_close, kind="success", width=280))
```

```python
ui.dialog_layer(main_view(), ui.modal(ui.muted("Any content."), title="Modal", on_close=on_close,
                                       width=280), on_dismiss=on_close)
```

```python
ui.dialog_layer(main_view(), None)
```

## Eventos

Capa de diálogo 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_dismiss` | `()` | Se envía al hacer clic en el fondo. |

**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 Files(pz.App):
    def __init__(self):
        self.asking = True

    def close(self):
        self.asking = False

    def view(self):
        dialog = ui.confirm("Delete main.py?", self.close, self.close, danger=True) if self.asking else None
        return ui.dialog_layer(main_view(), dialog, on_dismiss=self.close)   # click on the backdrop
```

**Declarativo:**

```python
class Files(pz.App):
    asking = True

    def update(self, message):
        if message in ("delete", "cancel"):
            self.asking = False

    def view(self):
        dialog = ui.confirm("Delete main.py?", "delete", "cancel", danger=True) if self.asking else None
        return ui.dialog_layer(main_view(), dialog, on_dismiss="cancel")
```

**Funcional:**

```python
from dataclasses import dataclass

@dataclass(frozen=True)
class State:
    asking: bool = True

def view(state, set_state):
    close = lambda: set_state(asking=False)
    dialog = ui.confirm("Delete main.py?", close, close, danger=True) if state.asking else None
    return ui.dialog_layer(main_view(), dialog, on_dismiss=close)
```

## Consejos

:::tip
Las etiquetas de los botones (Aceptar, Cancelar, Guardar…) se traducen con [`pyzed.i18n`](https://albakore.github.io/pyzed/es/guides/i18n/).
:::

## Propiedades y API

### `ui.dialog_layer`

```python
dialog_layer(base, dialog=None, *, on_dismiss=None, theme=None)
```

Muestra un diálogo centrado sobre `base` con un fondo oscurecido. Con `dialog=None` devuelve `base` sin cambios, así que puede envolver siempre la vista. Ver [Diálogos](https://albakore.github.io/pyzed/es/guides/i18n/#diálogos).

| Propiedad | Por defecto | Descripción |
| --- | --- | --- |
| `base` | *obligatorio* | La interfaz de debajo. |
| `dialog` | `None` | Un diálogo de las funciones de abajo, o `ui.modal`. |
| `theme` | `None` | Tema a usar en lugar del actual (`pyzed.theme.current()`). |

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

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

## Relacionados

- [Alerta](https://albakore.github.io/pyzed/es/library/alert/): Un mensaje con un botón.
- [Confirmación](https://albakore.github.io/pyzed/es/library/confirm/): Una pregunta de sí o no, en rojo para acciones destructivas.
- [Pregunta](https://albakore.github.io/pyzed/es/library/prompt/): Pide una línea de texto.
- [Modal](https://albakore.github.io/pyzed/es/library/modal/): Una superficie de diálogo con título, contenido y botones al pie.