Dropdown
<gstock-dropdown>
|
GstockDropdown
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
containingElement
|
The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other components that use a dropdown internally. |
HTMLElement | undefined
|
-
|
|
disabled
|
Disables the dropdown so the panel will not open. |
|
boolean
|
false
|
distance
|
The distance in pixels from which to offset the panel away from its trigger. |
number
|
0
|
|
hoist
|
Enable this option to prevent the panel from being clipped when the
component is placed inside a container with
overflow: auto|scroll. Hoisting uses a fixed positioning
strategy that works in many, but not all, scenarios.
|
boolean
|
false
|
|
image
|
The image source to use for the avatar. |
string
|
''
|
|
label
|
A label to use to describe the avatar to assistive devices. |
string
|
''
|
|
open
|
Indicates whether or not the dropdown is open. You can toggle this
attribute to show and hide the dropdown, or you can use the
show() and hide() methods and this attribute
will reflect the dropdown’s open state.
|
|
boolean
|
false
|
placement
|
The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport. |
|
'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' |
'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' |
'left-start' | 'left-end'
|
'bottom-start'
|
size
|
The size of the avatar. |
|
'small' | 'medium' | 'large'
|
'medium'
|
skidding
|
The distance in pixels from which to offset the panel along its trigger. |
number
|
0
|
|
stayOpenOnSelect
stay-open-on-select
|
By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions. |
|
boolean
|
false
|
sync
|
Syncs the popup width or height to that of the trigger element. |
|
'width' | 'height' | 'both' | undefined
|
undefined
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-show-event
|
onGstockShowEvent
|
Emitted when the dropdown opens. | - |
gstock-after-show-event
|
onGstockAfterShowEvent
|
Emitted after the dropdown opens and all animations are complete. | - |
gstock-hide-event
|
onGstockHideEvent
|
Emitted when the dropdown closes. | - |
gstock-after-hide-event
|
onGstockAfterHideEvent
|
Emitted after the dropdown closes and all animations are complete. | - |
Learn more about events .
Slots
| Name | Description |
|---|---|
default
|
The dropdown’s main content. |
trigger
|
The dropdown’s trigger, usually a
<gstock-button> element.
|
Learn more about slots .
Methods
| Name | Description |
|---|---|
show( )
|
Shows the dropdown panel. |
hide( )
|
Hides the dropdown panel |
reposition( )
|
Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu is activated. |
Learn more about methods .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper. |
trigger
|
The container that wraps the trigger. |
panel
|
The panel that gets shown when the dropdown is open. |
Learn more about CSS parts .
Animations
| Name | Description |
|---|---|
dropdown.show
|
The animation to use when showing the dropdown. |
dropdown.hide
|
The animation to use when hiding the dropdown. |
Learn more about animations .
Dependencies
This component automatically imports the following dependencies.