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"Whether 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: booleanAccessors
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(): IgrDropdownItemComponent | null
Returns IgrDropdownItemComponent | null
Methods
Section titled "Methods"clearSelection
Section titled "clearSelection"Clears the current selection of the dropdown.
clearSelection(): 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): IgrDropdownItemComponent | nullParameters
- value:
string
Returns IgrDropdownItemComponent | null
select
Section titled "select"Selects the item with the specified value. If it exists, returns the found item, otherwise - null.
select(value: string): IgrDropdownItemComponent | nullParameters
- value:
string
Returns IgrDropdownItemComponent | null
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"Emitted 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 opened.
onOpened(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpening
Section titled "onOpening"Emitted just before the dropdown is opened.
onOpening(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>