@jurca/szn-select-button v0.0.9

szn-select-button

UI button for the accessible HTML selectbox with customizable UI: szn-select.

This element is not meant to be used on its own; it is meant to be used by the szn-select custom element.

This project has been re-integrated into the szn-select element. This repository is no longer up-to-date.

Usage

Create an empty szn-select-button element, the element is configured entirely by its JavaScript API.

<szn-select-button></szn-select-button>

The element must be linked to the select element it is to represent:

selectButton.setSelectElement(selectElement)

The element adjusts its appearance based on whether the single-select dropdown is currently opened and whether it's a dropdown or a dropup. However, the element cannot determine the state of the dropdown on its own, so it has to be notified using the following JavaScript API:

// notifies the button that the dropdown is visible
selectButton.setOpen(true)
// notifies the button that the dropdown is no longer visible
selectButton.setOpen(false)

// notifies the button that the dropdown is actually a dropup
selectButton.setOpeningPosition(selectButton.OPENING_POSITION.UP)
// notifies the button that the dropdown is, well, a dropdown
selectButton.setOpeningPosition(selectButtonbutton.OPENING_POSITION.DOWN)