Appearance

Menu ​

A dropdown menu input widget.

menu(options)

Return a new menu component with the provided options. Creates an instance of the Menu class, connects it to coordinator, and returns the corresponding HTML element.

The supported options are:

  • as: A Param or Selection that this menu should update. For a Param, the selected menu value is set to be the new param value. For a Selection, a predicate of the form column = value will be added to the selection.
  • field: The database column name to use within generated selection clause predicates. Defaults to the column option.
  • filterBy: An optional selection by which to filter the content of the menu, if drawn from a backing table.
  • from: The name of a backing database table to use as a data source of menu options. Used in conjunction with the column option.
  • column: The name of a backing database column from which to pull menu options. The unique column values are used as menu options. Used in conjunction with the from option.
  • label: A text label for the menu input. If unspecified, the column name (if provided) will be used by default.
  • format: A format function that takes an option value as input and generates a string label. The format function is not applied when an explicit label is provided in an option object.
  • options: An array of menu options, as literal values or option objects. Option objects have a value property and an optional label property. If no label or format function is provided, the string-coerced value is used.
  • value: The initial selected menu value.
  • element: The parent DOM element in which to place the menu elements. If undefined, a new div element is created.

Examples ​

Create a new menu with options pulled from table.foo in the backing database:

js
menu({ from: "table", column: "foo", as: param })

Create a new menu with options provided explicitly:

js
menu({
  as: selection,
  options: [
    { label: "label1", value: "value1" },
    { label: "label2", value: "value2" },
    ...
  ]
})

new Menu(options)

Class definition for a menu input that extends MosaicClient. The constructor accepts the same options as the menu method.

element ​

menu.element

The HTML element containing the menu input.