command

Command menus and comboboxes: a search box over a list of options that narrows as you type.

command.command("actions", placeholder: "Type a command…", attributes: [], children: [
  command.group("Suggestions", [
    command.item([event.on_click(NewInvoice)], [text("New invoice")]),
    command.item([command.keywords("customer client")], [text("Add contact")]),
  ]),
  command.empty([text("No results.")]),
])

Typing hides the options that do not match their text or keywords; the arrow keys move through the rest and Enter activates one, as if it were clicked. Focus stays in the search box throughout.

dialog opens a command menu over the page, with a keyboard shortcut such as ⌘K. combobox is a select with a search box: choosing an option sets a hidden input, like howdy/ui/select.

Filtering happens in the browser. With too many options to send at once, render the matches from the server instead: listen for input on the search box and pass server_filtered so the browser leaves the list as it is.

dialog and the comboboxes take words for their names and the labels of their clear and remove buttons; see howdy/ui/words.

Values

chip_class

</>

pub fn chip_class() -> css.Class

chip_remove_class

</>

pub fn chip_remove_class() -> css.Class

chips_class

</>

pub fn chips_class() -> css.Class

The box around a multiple combobox’s chips and button, drawn as the field.

chips_trigger_class

</>

pub fn chips_trigger_class() -> css.Class

The button in a multiple combobox: it takes the rest of the row.

classes

</>

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

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

clear_class

</>

pub fn clear_class() -> css.Class

combobox

</>

pub fn combobox(
  words words: words.Words,
  id id: String,
  name name: String,
  value value: String,
  label label: String,
  placeholder placeholder: String,
  search search: String,
  attributes attributes: List(attribute.Attribute(msg)),
  options options: List(element.Element(msg)),
) -> element.Element(msg)

A button showing the chosen option, or placeholder, that opens a searchable list. Choosing sets the hidden input called name; a clear button beside it empties it again. Each option is an item with a value, made with option. attributes go on the button: pass attribute.disabled(True) or attribute.aria_invalid("true") there.

combobox_class

</>

pub fn combobox_class() -> css.Class

command

</>

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

A search box above a list of groups, items and an empty message. attributes go on the search box.

command_class

</>

pub fn command_class() -> css.Class

dialog

</>

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

A command menu in a dialog. shortcut is a letter that opens it with ⌘ on macOS or Ctrl elsewhere; pass "" for none. Open it with a button too, using howdy/ui/dialog.trigger.

dialog_class

</>

pub fn dialog_class() -> css.Class

empty

</>

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

Shown when nothing matches.

empty_class

</>

pub fn empty_class() -> css.Class

group

</>

pub fn group(
  heading: String,
  items: List(element.Element(msg)),
) -> element.Element(msg)

Options under a heading. Hidden when none of them match.

group_class

</>

pub fn group_class() -> css.Class

heading_class

</>

pub fn heading_class() -> css.Class

input_class

</>

pub fn input_class() -> css.Class

item

</>

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

An option. Its click handler runs when it is chosen with the mouse or with Enter. Disable one with attribute.aria_disabled(True).

item_class

</>

pub fn item_class() -> css.Class

keywords

</>

pub fn keywords(words: String) -> attribute.Attribute(msg)

Extra words an item matches, beyond its text.

link

</>

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

An option that goes to another page when chosen.

list_class

</>

pub fn list_class() -> css.Class

multiple_combobox

</>

pub fn multiple_combobox(
  words words: words.Words,
  id id: String,
  name name: String,
  values values: List(String),
  placeholder placeholder: String,
  search search: String,
  attributes attributes: List(attribute.Attribute(msg)),
  options options: List(#(String, String)),
) -> element.Element(msg)

A combobox where several options can be chosen, from options given as #(value, label). Choosing one toggles it and leaves the list open. The chosen options show as chips beside the button, each with its own remove button; Backspace on the button removes the last.

The form gets one field called name per chosen value, so values may hold any character; read them with list.key_filter(fields, name). A live view hears the whole set with howdy/ui/live.on_values.

option

</>

pub fn option(
  value: String,
  selected selected: Bool,
  children children: List(element.Element(msg)),
) -> element.Element(msg)

An option in a combobox. selected marks the one whose value is the combobox’s value.

</>

pub fn popover_class() -> css.Class

separator

</>

pub fn separator() -> element.Element(msg)

A line between groups.

separator_class

</>

pub fn separator_class() -> css.Class

server_filtered

</>

pub fn server_filtered() -> attribute.Attribute(msg)

Leave the list as the server renders it instead of filtering it in the browser. Put it in the command’s attributes.

trigger_class

</>

pub fn trigger_class() -> css.Class

value_class

</>

pub fn value_class() -> css.Class