# `FrappeUIPhx.Components.Dialog`
[🔗](https://github.com/moacirbishopcamata/frappe_ui_phx/blob/v0.3.1/lib/frappe_ui_phx/components/dialog.ex#L1)

Diálogo modal sobre `<dialog>` nativo (foco preso, Esc e backdrop pelo navegador).

Abre/fecha de duas formas, sem estado de negócio no cliente:

  * comando `JS` declarativo: `phx-click={show_dialog("meu-dialog")}` / `hide_dialog/1`;
  * assign do servidor: `open={@mostrar?}` (o hook só reage a *mudanças* do valor).

Com `on_close="evento"`, o servidor é avisado quando o diálogo fecha por Esc,
backdrop ou botão, para manter o assign coerente.

# `dialog`

## Attributes

* `id` (`:string`) (required)
* `open` (`:boolean`) - Defaults to `false`.
* `title` (`:string`) - Defaults to `nil`.
* `size` (`:atom`) - Defaults to `:lg`. Must be one of `:sm`, `:md`, `:lg`, `:xl`, or `:"2xl"`.
* `placement` (`:atom`) - `:bottom` vira uma folha inferior (BottomSheet). Defaults to `:center`. Must be one of `:center`, or `:bottom`.
* `on_close` (`:string`) - evento enviado ao servidor quando o diálogo fecha. Defaults to `nil`.
* `close_on_backdrop` (`:boolean`) - Defaults to `true`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)
* `actions`

# `hide_dialog`

```elixir
@spec hide_dialog(String.t()) :: Phoenix.LiveView.JS.t()
```

Comando `JS` que fecha o diálogo `id`.

# `hook_name`

Nome do hook colocated do diálogo (para componentes que montam o próprio `<dialog>`).

# `show_dialog`

```elixir
@spec show_dialog(String.t()) :: Phoenix.LiveView.JS.t()
```

Comando `JS` que abre o diálogo `id`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*