HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Inline Picker
Examples
Color: . Click to edit.

HTML

Color: <span id="picker"></span>. Click to edit.

JavaScript

new hx.InlinePicker('#picker', {
  items: ['Red', 'Green', 'Blue'],
  value: 'Red'
})
Api
Change Log
Prototypes
hx.InlinePickerextendsEventEmitter
Constructors
hx.InlinePickerselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
A CSS selector that uniquely identifies the element, or an HTMLElement.
options
The options to use when constructing the inline picker
Properties
contextClassString
The class to use for the button when the picker is active.
ddClassString
The additional class to add to the dropdown when creating it.
itemsArray / Function
The list of items that can be selected. Can also be an array of objects with value properties (and other information for displaying the items). For this a custom renderer must be set.
This can also be set after the picker has been constructed using the items method.
noValueTextString
The text to use when no value is selected.
Default: 'Choose a value...'
renderer
A function that renders the data in the dropdown and the picker button.
This can also be set after the picker has been constructed using the renderer method.
Default: 
function (node, data) {
  hx.select(node).text(data);
}
valueString
The value to use when initialising the select.
Events
change
Emitted when the value is changed.
Methods
itemsArray
Sets the list of items that will be shown in the picker dropdown.
Returns
Array
The currently set items
itemsitemsArray[String]InlinePicker
Sets the list of items that will be shown in the picker dropdown.
Arguments
itemsArray[String]
The list of items that can be selected. Can also be an array of objects with value properties (and other information for displaying the items). For this a custom renderer must be set.
Returns
InlinePicker
Returns this InlinePicker for chaining
rendererFunction
Returns
function
Returns the currently set renderer function.
rendererrenderFunctionInlinePicker
Sets the renderer function for the underlying picker.
Arguments
rendernodeHTMLElementdataAny
Arguments
nodeHTMLElement
The element to populate
dataAny
The data to populate the element with
Returns
InlinePicker
Returns this picker for chaining.
valuevalueStringInlinePicker
Sets the value of the element.
Arguments
valueString
The value to give the element. If not specified the current value will be returned.
Returns
InlinePicker
This InlinePicker is returned for chaining.
valueString
Gets the value of the element.
Returns
String
Returns the current value in the editable.