DropDownButton
DropDownButton displays any type of content like components, text, images, etc in a DropDown.
Selector
smart-drop-down-button
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
autoCloseDelaynumber
Determines the delay before the opened drop down closes when dropDownOpenMode is set to 'auto'.
Default value100
disabledboolean
Enables or disables the element.
Default valuefalse
dropDownAppendToany
Sets the parent container of the dropDown (the popup). Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown.
dropDownButtonPositionDropDownButtonPosition
Determines the position of the drop down button.
Default valueright
dropDownHeightstring | number
Sets the height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
Default value
dropDownMaxHeightstring | number
Sets the max height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
Default value
dropDownMaxWidthstring | number
Sets the max width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
Default value
dropDownMinHeightstring | number
Sets the min height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
Default value
dropDownMinWidthstring | number
Sets the min width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
Default value
dropDownOpenModeDropDownOpenMode
Determines how the drop down is going to open.
Default valuedefault
dropDownOverlayboolean
If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.
Default valuefalse
dropDownPlaceholderstring
Sets a placeholder text to appear when there is no content inside the dropdown.
Default value"No Items
dropDownPositionDropDownPosition
Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size.
Default valueauto
dropDownWidthstring | number
Sets the width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
Default value
hintstring
Sets additional helper text below the element. The hint is visible only when the element is focused.
Default value"
horizontalScrollBarVisibilityHorizontalScrollBarVisibility
Determines the visibility of the horizontal Scroll bar inside the drop down.
Default valueauto
labelstring
Sets a label above the element. The label is always visible.
Default value"
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."
}
openedboolean
Determines whether the popup is opened or closed
Default valuefalse
placeholderstring
Determines the element's placeholder, displayed in the element's action button container.
Default value"
readonlyboolean
Disables user interaction with the element.
Default valuefalse
resizeIndicatorboolean
Determines whether the resize indicator in the bottom right corner is visible or not.
Default valuefalse
resizeModeResizeMode
Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down.
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
verticalScrollBarVisibilityVerticalScrollBarVisibility
Determines the visibility of the vertical scroll bar.
Default valueauto
onactionbuttonclick((this: Window, ev: Event) => any) | null
This event is triggered when user clicks on the action button. The action button is visible when the placeholder is set.
Arguments
evEvent
onclose((this: Window, ev: Event) => any) | null
This event is triggered when the drop down is closed.
Arguments
evEvent
onclosing((this: Window, ev: Event) => any) | null
This event is triggered when the drop down list is about to be closed. This event allows to cancel the closing operation calling event.preventDefault() in the event handler function.
Arguments
evEvent
ondropdownbuttonclick((this: Window, ev: Event) => any) | null
This event is triggered when user clicks on the drop down button.
Arguments
evEvent
onopen((this: Window, ev: Event) => any) | null
This event is triggered when the drop down is opened.
Arguments
evEvent
onopening((this: Window, ev: Event) => any) | null
This event is triggered when the drop down is about to be opened. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.
Arguments
evEvent
onresizestart((this: Window, ev: Event) => any) | null
This event is triggered when user starts resizing the drop down.
Arguments
evEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.
onresizeend((this: Window, ev: Event) => any) | null
This event is triggered when user finishes resizing the drop down.
Arguments
evEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.
Methods
appendChild( node: Node): T
Arguments
nodeNode
The node to be appended
ReturnsNode
close(): void
Closes the dropDown.
open(): void
Opens the dropDown.
removeAll(): void
Removes everything from the drop down.
removeChild( node: Node): T
Arguments
nodeNode
The node to remove.
ReturnsNode
scrollTo( top: number, left: number): void
Scrolls the drop down to a specific position.
Arguments
topnumber
Y axis coordinate
leftnumber
X axis coordinate