UIDropdown

Simple Drop down component, which renders a select-element containing option-elements.

Since: 7.0.0 (3.9.0)

Name	Type	Default	Description
options	Array.<{label: string, value: *}>		Required - An array of Objects with "label" and "value" properties
header	string		Deprecated. Should be handle outside. Optional header property, renders an h2-element above the dropdown
disabled	boolean	false	Set to true to disable selection of the dropdown
size	string	"&quot;normal&quot;"	Set size. normal|huge|large|small|tiny
type	string	"&quot;default&quot;"	Style of dropdown. default|primary|secondary|text default
tabindex	number	0	Provied tabindex. Use -1 to disable tab navigation
direction	string	"&quot;down&quot;"	Direction of the selection list postion. down|up
optionsListAlign	string	"&quot;left&quot;"	Option list alignment against button. left|right
optionsListWidth	string	"&quot;auto&quot;"	Option list width. Auto takes up just width it's need. auto|full
onChangeList	function		Required - Callback function when selected option changes. Selected item's value as parameter
isSelected	function		Required - Callback which should return true for the currently selected option, runs for each item when rendered and gets all options and current option as parameters.

Example

import {UIDropdown} from 'writer'

render($$) {
  const el = $$('div')
  return el.append(
     $$(UIDropdown, {
         options: [
             {label: "one", value: 1},
             {label: "two", value: 2}
         ],
         onChangeList: (value) => { this.extendState({ selectedValue: value }) },
         isSelected: (options, option) => { return option.value === this.state.selectedValue }
     })
  )
}