dialog

Dialogs, alert dialogs and sheets: content shown above the page, which is inert until the dialog closes.

ui.button(Outline, dialog.trigger("rename"), [text("Rename")]),
dialog.dialog("rename", [], [
  dialog.header([
    dialog.title("rename", [text("Rename project")]),
    dialog.description("rename", [text("Pick a name your team will recognise.")]),
  ]),
  ui.input([attribute.name("name")]),
  dialog.footer([
    ui.button(Outline, dialog.close("rename"), [text("Cancel")]),
    ui.button(Primary, [event.on_click(Rename)], [text("Save")]),
  ]),
])

Each is a native <dialog> opened as a modal, so the browser keeps focus inside it, closes it with Escape and returns focus to the trigger. The trigger and the dialog are tied by id, so they must be in the same document: both in the page, or both in one live view.

A <form method="dialog"> inside a dialog closes it when submitted. A live view hears the dialog close with event.on("close", ...).

The behaviour needs howdy/ui/behaviour in older browsers; pages built with howdy/ui/page include it.

Types

Side

</>

The edge of the screen a sheet slides from.

pub type Side {
  Top
  Right
  Bottom
  Left
}

Constructors

```
Top
```
```
Right
```
```
Bottom
```
```
Left
```

Values

alert_dialog

</>

pub fn alert_dialog(
  id: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A dialog that asks for a decision. Clicking outside it does nothing, so give it buttons for every answer. Escape still closes it.

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

close

</>

pub fn close(id: String) -> List(attribute.Attribute(msg))

Attributes for a button that closes the dialog with this id.

description

</>

pub fn description(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

A sentence about the dialog, read out after its title. Pass the dialog’s id.

description_class

</>

pub fn description_class() -> css.Class

dialog

</>

pub fn dialog(
  id: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A dialog in the middle of the screen. Clicking outside it closes it.

dialog_class

</>

pub fn dialog_class() -> css.Class

</>

pub fn footer(
  children: List(element.Element(msg)),
) -> element.Element(msg)

A row of buttons at the bottom, aligned to the end.

footer_class

</>

pub fn footer_class() -> css.Class

</>

pub fn header(
  children: List(element.Element(msg)),
) -> element.Element(msg)

The title and description at the top.

header_class

</>

pub fn header_class() -> css.Class

sheet

</>

pub fn sheet(
  id: String,
  side: Side,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A dialog along one edge of the screen, for navigation or a form beside the page’s content. Clicking outside it closes it.

sheet_class

</>

pub fn sheet_class(side: Side) -> css.Class

title

</>

pub fn title(
  id: String,
  children: List(element.Element(msg)),
) -> element.Element(msg)

The dialog’s name, read out when it opens. Pass the dialog’s id.

title_class

</>

pub fn title_class() -> css.Class

trigger

</>

pub fn trigger(id: String) -> List(attribute.Attribute(msg))

Attributes for a button that opens the dialog, alert dialog or sheet with this id.