VOOZH about

URL: https://component.kitchen/elix/PopupToggleMixin

⇱ PopupToggleMixin - Component Kitchen


Demo: The toggle with an arrow icon in this DropdownList is supplied by PopupToggleMixin

Purpose: Manages a popup toggle part for a popup source.

This mixin works in the middle of the Elix render pipeline:

events → methods → setStaterender DOM → post-render

Expects the component to provide:

  • source part, usually defined by PopupSource, in the component's template.

Provides the component with:

  • template getter that injects a toggle into the popup's source part.
  • popupTogglePartType state member and public property indicating the type of the toggle part.
import PopupSource from "elix/src/base/PopupSource.js";
import PopupToggleMixin from "elix/src/base/PopupToggleMixin.js";
class MyElement extends PopupToggleMixin(PopupSource) {}

The element defines the following shadow parts:

  • down-icon: the icon shown in the toggle if the popup will open or close in the down direction
  • popup-toggle: the element that lets the user know they can open the popup, default type is UpDownToggle
  • up-icon: the icon shown in the toggle if the popup will open or close in the up direction

Used by classes AutoCompleteComboBox, ComboBox, DateComboBox, FilterComboBox, ListComboBox, PlainAutoCompleteComboBox, PlainComboBox, PlainDateComboBox, PlainDropdownList, PlainFilterComboBox, PlainListComboBox, and PlainMenuButton.