Represents a DropDown component.
- Slots
-
target— Renders the dropdown's target element. -
default— Renders the dropdown list items.
- CSS Parts
base— The dropdown list wrapper container.list— The dropdown list element.
Properties
Section titled "Properties"distance
Section titled "distance"The distance from the target element.
distance: numberWhether the component should be flipped to the opposite side of the target once it's about to overflow the visible area. When true, once enough space is detected on its preferred side, it will flip back.
flip: booleanplacement
Section titled "placement"The preferred placement of the component around the target element.
placement: PopoverPlacementsameWidth
Section titled "sameWidth"Whether the dropdown's width should be the same as the target's one.
sameWidth: booleanscrollStrategy
Section titled "scrollStrategy"Determines the behavior of the component during scrolling of the parent container.
scrollStrategy: PopoverScrollStrategyAccessors
Section titled "Accessors"groups
Section titled "groups"Returns the group items of the dropdown.
get groups(): IgrDropdownGroupComponent[]Returns IgrDropdownGroupComponent[]
items
Section titled "items"Returns the items of the dropdown.
get items(): IgrDropdownItemComponent[]Returns IgrDropdownItemComponent[]
selectedItem
Section titled "selectedItem"Returns the selected item from the dropdown or null.
get selectedItem(): IgrDropdownItemComponentReturns IgrDropdownItemComponent
Methods
Section titled "Methods"clearSelection
Section titled "clearSelection"Clears the current selection of the dropdown.
clearSelection(): voidReturns void
disconnectedCallback
Section titled "disconnectedCallback"Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.
``
An element may be re-connected after being disconnected.
disconnectedCallback(): voidReturns void
navigateTo
Section titled "navigateTo"Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.
navigateTo(value: string): IgrDropdownItemComponentParameters
- value:
string
Returns IgrDropdownItemComponent
select
Section titled "select"Selects the item with the specified value. If it exists, returns the found item, otherwise - null.
select(value: string): IgrDropdownItemComponentParameters
- value:
string
Returns IgrDropdownItemComponent
Shows the component.
show(target: string | HTMLElement): Promise<boolean>Parameters
- target:
string | HTMLElement
Returns Promise<boolean>
toggle
Section titled "toggle"Toggles the open state of the component.
toggle(target: string | HTMLElement): Promise<boolean>Parameters
- target:
string | HTMLElement
Returns Promise<boolean>
Events
Section titled "Events"onChange
Section titled "onChange"Emitted when the selected item changes.
onChange(args: CustomEvent<IgrDropdownItemComponent>): voidParameters
- args:
CustomEvent<IgrDropdownItemComponent>
Returns void
onClosed
Section titled "onClosed"Emitted after closing the dropdown.
onClosed(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onClosing
Section titled "onClosing"Emitter just before the dropdown is closed.
onClosing(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpened
Section titled "onOpened"Emitted after the dropdown is open.
onOpened(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpening
Section titled "onOpening"Emitted just before the dropdown is open.
onOpening(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>