howdy/ui/drawer

Drawers: a panel that slides up from the bottom of the screen, and can be dragged by its handle to resize or dismiss it. Suited to phones, and to actions or details that belong beside the page.

ui.button(Outline, drawer.trigger("filters"), [text("Filters")]),
drawer.drawer(words.english(), "filters", [drawer.snap_points([40, 90])], [
  drawer.header([
    drawer.title("filters", [text("Filters")]),
    drawer.description("filters", [text("Narrow the list of orders.")]),
  ]),
  filter_form,
])

A drawer is a modal <dialog>: focus stays inside it, Escape and a click outside close it, and focus returns to its trigger. Dragging the handle down far enough closes it too. With snap_points, it opens at the first height, given as percentages of the screen, and settles at whichever height is nearest when the handle is let go. The handle can also be focused and moved with the up and down arrow keys.

pub fn body_class() -> css.Class

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

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

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

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

pub fn drawer_class() -> css.Class

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

pub fn handle_class() -> css.Class

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

pub fn rules() -> List(#(String, String))

pub fn snap_points(
  heights: List(Int),
) -> attribute.Attribute(msg)

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

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