PopupToggleMixin

Manages a popup toggle part for a popup source
Beginner Intermediate Expert
Demo: The toggle with an arrow icon in this DropdownList is supplied by PopupToggleMixin

Overview

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.

Usage

import PopupSource from "elix/src/base/PopupSource.js";
import PopupToggleMixin from "elix/src/base/PopupToggleMixin.js";
class MyElement extends PopupToggleMixin(PopupSource) {}

API

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, DropdownList, FilterComboBox, ListComboBox, MenuButton, PlainAutoCompleteComboBox, PlainComboBox, PlainDateComboBox, PlainDropdownList, PlainFilterComboBox, PlainListComboBox, PlainMenuButton, PlainPopupButton, and PopupButton.

popupTogglePartType property

The class or tag used to create the popup-toggle part – the element that lets the user know they can open the popup.

Type: (component class constructor)|HTMLTemplateElement|string

Default: UpDownToggle