DropDownButton JAVASCRIPT UI Component API

DropDownButton Javascript API

Class

DropDownButton

DropDownButton

DropDownButton displays any type of content like components, text, images, etc in a DropDown.

Selector

smart-drop-down-button

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoCloseDelayDetermines the delay before the opened drop down closes when dropDownOpenMode is set to 'auto'.
DdisabledEnables or disables the element.
DdropDownAppendToSets the parent container of the dropDown (the popup). Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown.
DdropDownButtonPositionDetermines the position of the drop down button.
DdropDownHeightSets 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.
DdropDownMaxHeightSets 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.
DdropDownMaxWidthSets 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.
DdropDownMinHeightSets 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.
DdropDownMinWidthSets 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.
DdropDownOpenModeDetermines how the drop down is going to open.
DdropDownOverlayIf 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.
DdropDownPlaceholderSets a placeholder text to appear when there is no content inside the dropdown.
DdropDownPositionDetermines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size.
DdropDownWidthSets 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.
HhintSets additional helper text below the element. The hint is visible only when the element is focused.
HhorizontalScrollBarVisibilityDetermines the visibility of the horizontal Scroll bar inside the drop down.
LlabelSets a label above the element. The label is always visible.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
OopenedDetermines whether the popup is opened or closed
PplaceholderDetermines the element's placeholder, displayed in the element's action button container.
PplaceholderTemplateDetermines the element's placeholder template, displayed in the element's action button container. You can pass 'string', 'function' or HTMLTemplateElement as a value.
RreadonlyDisables user interaction with the element.
RresizeIndicatorDetermines whether the resize indicator in the bottom right corner is visible or not.
RresizeModeDetermines 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.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.
VverticalScrollBarVisibilityDetermines the visibility of the vertical scroll bar.

Events

AactionButtonClickThis event is triggered when user clicks on the action button. The action button is visible when the placeholder is set.
CcloseThis event is triggered when the drop down is closed.
CclosingThis 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.
DdropDownButtonClickThis event is triggered when user clicks on the drop down button.
OopenThis event is triggered when the drop down is opened.
OopeningThis 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.
RresizeStartThis event is triggered when user starts resizing the drop down.
RresizeEndThis event is triggered when user finishes resizing the drop down.

Methods

CcloseCloses the dropDown.
OopenOpens the dropDown.
RremoveAllRemoves everything from the drop down.
SscrollToScrolls the drop down to a specific position.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-drop-down-button animation='none'></smart-drop-down-button>

Set the animation property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.animation = 'simple';

Get the animation property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let animation = dropdownbutton.animation;

autoCloseDelaynumber

Determines the delay before the opened drop down closes when dropDownOpenMode is set to 'auto'.

Default value

100

Example

Set the autoCloseDelay property. 

 <smart-drop-down-button auto-close-delay='50'></smart-drop-down-button>

Set the autoCloseDelay property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.autoCloseDelay = 200;

Get the autoCloseDelay property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let autoCloseDelay = dropdownbutton.autoCloseDelay;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property. 

 <smart-drop-down-button disabled></smart-drop-down-button>

Set the disabled property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.disabled = false;

Get the disabled property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let disabled = dropdownbutton.disabled;

dropDownAppendTostring

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.

Default value

"null"
Try a demo showcasing the dropDownAppendTo property.

Example

Set the dropDownAppendTo property. 

 <smart-drop-down-button drop-down-append-to='body'></smart-drop-down-button>

Set the dropDownAppendTo property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownAppendTo = 'null';

Get the dropDownAppendTo property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownAppendTo = dropdownbutton.dropDownAppendTo;

dropDownButtonPosition"left" | "right" | "top" | "bottom"

Determines the position of the drop down button.

Allowed Values

  • "left" - Positions the drop down button on the left side of the element.
  • "right" - Positions the drop down button on the right side of the element.
  • "top" - Positions the drop down button on the top side of the element.
  • "bottom" - Positions the drop down button on the bottom side of the element.

Default value

"right"
Try a demo showcasing the dropDownButtonPosition property.

Example

Set the dropDownButtonPosition property. 

 <smart-drop-down-button drop-down-button-position='left'></smart-drop-down-button>

Set the dropDownButtonPosition property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownButtonPosition = 'null';

Get the dropDownButtonPosition property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownButtonPosition = dropdownbutton.dropDownButtonPosition;

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

""

Example

Set the dropDownHeight property. 

 <smart-drop-down-button drop-down-height='300'></smart-drop-down-button>

Set the dropDownHeight property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownHeight = 500;

Get the dropDownHeight property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownHeight = dropdownbutton.dropDownHeight;

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

""

Example

Set the dropDownMaxHeight property. 

 <smart-drop-down-button drop-down-max-height='800'></smart-drop-down-button>

Set the dropDownMaxHeight property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownMaxHeight = 1000;

Get the dropDownMaxHeight property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownMaxHeight = dropdownbutton.dropDownMaxHeight;

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

""

Example

Set the dropDownMaxWidth property. 

 <smart-drop-down-button drop-down-max-width='500'></smart-drop-down-button>

Set the dropDownMaxWidth property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownMaxWidth = 800;

Get the dropDownMaxWidth property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownMaxWidth = dropdownbutton.dropDownMaxWidth;

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

""

Example

Set the dropDownMinHeight property. 

 <smart-drop-down-button drop-down-min-height='50'></smart-drop-down-button>

Set the dropDownMinHeight property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownMinHeight = 150;

Get the dropDownMinHeight property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownMinHeight = dropdownbutton.dropDownMinHeight;

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

""

Example

Set the dropDownMinWidth property. 

 <smart-drop-down-button drop-down-min-width='100'></smart-drop-down-button>

Set the dropDownMinWidth property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownMinWidth = 90;

Get the dropDownMinWidth property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownMinWidth = dropdownbutton.dropDownMinWidth;

dropDownOpenMode"none" | "default" | "dropDownButton" | "auto"

Determines how the drop down is going to open.

Allowed Values

  • "none" - The drop down can't be opened.
  • "default" - The drop down opens when the user clicks on the element
  • "dropDownButton" - The element is split in two button: action and drop down buttons. The drop down opens only when the button is clicked. The action button fires a custom event when clicked on. The event can be used to execute a custom operation on click.
  • "auto" - The drop down opens when the element is hovered and closed when not.

Default value

"default"
Try a demo showcasing the dropDownOpenMode property.

Example

Set the dropDownOpenMode property. 

 <smart-drop-down-button drop-down-open-mode='dropDownButton'></smart-drop-down-button>

Set the dropDownOpenMode property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownOpenMode = 'auto';

Get the dropDownOpenMode property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownOpenMode = dropdownbutton.dropDownOpenMode;

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 value

false

Example

Set the dropDownOverlay property. 

 <smart-drop-down-button drop-down-overlay></smart-drop-down-button>

Set the dropDownOverlay property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownOverlay = false;

Get the dropDownOverlay property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownOverlay = dropdownbutton.dropDownOverlay;

dropDownPlaceholderstring

Sets a placeholder text to appear when there is no content inside the dropdown.

Default value

"No Items"

Example

Set the dropDownPlaceholder property. 

 <smart-drop-down-button drop-down-placeholder='No content'></smart-drop-down-button>

Set the dropDownPlaceholder property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownPlaceholder = 'Empty';

Get the dropDownPlaceholder property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownPlaceholder = dropdownbutton.dropDownPlaceholder;

dropDownPosition"auto" | "top" | "bottom" | "overlay-top" | "overlay-center" | "overlay-bottom" | "center-bottom" | "center-top"

Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size.

Allowed Values

  • "auto" - The position is automatically determines by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
  • "top" - The drop down opens above the element.
  • "bottom" - The drop down opens under the element.
  • "overlay-top" - The drop down opens above and over the element. The bottom edges of the drop down cover the element.
  • "overlay-center" - The drop down opens at the center, over the element.
  • "overlay-bottom" - The drop down opens under and over the element. The top edges of the drop down cover the element.
  • "center-bottom" - The drop down opens at the center, below the element.
  • "center-top" - The drop down opens at the center, over the element.

Default value

"auto"
Try a demo showcasing the dropDownPosition property.

Example

Set the dropDownPosition property. 

 <smart-drop-down-button drop-down-position='top'></smart-drop-down-button>

Set the dropDownPosition property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownPosition = 'bottom';

Get the dropDownPosition property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownPosition = dropdownbutton.dropDownPosition;

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

""

Example

Set the dropDownWidth property. 

 <smart-drop-down-button drop-down-width='300'></smart-drop-down-button>

Set the dropDownWidth property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.dropDownWidth = 500;

Get the dropDownWidth property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let dropDownWidth = dropdownbutton.dropDownWidth;

hintstring

Sets additional helper text below the element. The hint is visible only when the element is focused.

Default value

""

Example

Set the hint property. 

 <smart-drop-down-button hint='Helper text'></smart-drop-down-button>

Set the hint property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.hint = 'Hint';

Get the hint property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let hint = dropdownbutton.hint;

horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines the visibility of the horizontal Scroll bar inside the drop down.

Allowed Values

  • "auto" - The element automatically determines whether or not the horizontal Scroll bar should be visible or not.
  • "disabled" - Disables the horizontal Scroll bar.
  • "hidden" - Hides the horizontal Scroll bar.
  • "visible" - Shows the horizontal Scroll bar even if not necessary.

Default value

"auto"

Example

Set the horizontalScrollBarVisibility property. 

 <smart-drop-down-button horizontal-scroll-bar-visibility='disabled'></smart-drop-down-button>

Set the horizontalScrollBarVisibility property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let horizontalScrollBarVisibility = dropdownbutton.horizontalScrollBarVisibility;

labelstring

Sets a label above the element. The label is always visible.

Default value

""

Example

Set the label property. 

 <smart-drop-down-button label='Helper text'></smart-drop-down-button>

Set the label property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.label = 'Label';

Get the label property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let label = dropdownbutton.label;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-drop-down-button locale='de'></smart-drop-down-button>

Set the locale property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.locale = 'en';

Get the locale property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let locale = dropdownbutton.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-drop-down-button localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-drop-down-button>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let localizeFormatFunction = dropdownbutton.localizeFormatFunction;

messagesobject

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}}."

}

Example

Set the messages property. 

 <smart-drop-down-button messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-drop-down-button>

Set the messages property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.messages = {"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}}."}};

Get the messages property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let messages = dropdownbutton.messages;

openedboolean

Determines whether the popup is opened or closed

Default value

false

Example

Set the opened property. 

 <smart-drop-down-button opened></smart-drop-down-button>

Set the opened property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.opened = false;

Get the opened property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let opened = dropdownbutton.opened;

placeholderstring

Determines the element's placeholder, displayed in the element's action button container.

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

 <smart-drop-down-button placeholder='Choose:'></smart-drop-down-button>

Set the placeholder property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.placeholder = 'Submit';

Get the placeholder property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let placeholder = dropdownbutton.placeholder;

placeholderTemplateany

Determines the element's placeholder template, displayed in the element's action button container. You can pass 'string', 'function' or HTMLTemplateElement as a value.

Try a demo showcasing the placeholderTemplate property.

Example

Set the placeholderTemplate property. 

 <smart-drop-down-button placeholder-template='Choose:'></smart-drop-down-button>

Set the placeholderTemplate property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.placeholderTemplate = Submit;

Get the placeholderTemplate property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let placeholderTemplate = dropdownbutton.placeholderTemplate;

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property. 

 <smart-drop-down-button readonly></smart-drop-down-button>

Set the readonly property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.readonly = false;

Get the readonly property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let readonly = dropdownbutton.readonly;

resizeIndicatorboolean

Determines whether the resize indicator in the bottom right corner is visible or not.

Default value

false

Example

Set the resizeIndicator property. 

 <smart-drop-down-button resize-indicator></smart-drop-down-button>

Set the resizeIndicator property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.resizeIndicator = false;

Get the resizeIndicator property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let resizeIndicator = dropdownbutton.resizeIndicator;

resizeMode"none" | "horizontal" | "vertical" | "both"

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.

Allowed Values

  • "none" - Resizing the drop down is not allowed.
  • "horizontal" - Horizontal resizing of the drop down is allowed but not vertical.
  • "vertical" - Vertical resizing of the drop down is allowed but not horizontal.
  • "both" - Resizing the drop down is allowed in all directions.

Default value

"null"
Try a demo showcasing the resizeMode property.

Example

Set the resizeMode property. 

 <smart-drop-down-button resize-mode='horizontal'></smart-drop-down-button>

Set the resizeMode property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.resizeMode = 'vertical';

Get the resizeMode property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let resizeMode = dropdownbutton.resizeMode;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-drop-down-button right-to-left></smart-drop-down-button>

Set the rightToLeft property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.rightToLeft = true;

Get the rightToLeft property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let rightToLeft = dropdownbutton.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-drop-down-button theme='blue'></smart-drop-down-button>

Set the theme property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.theme = 'red';

Get the theme property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let theme = dropdownbutton.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-drop-down-button unfocusable></smart-drop-down-button>

Set the unfocusable property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.unfocusable = false;

Get the unfocusable property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let unfocusable = dropdownbutton.unfocusable;

verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines the visibility of the vertical scroll bar.

Allowed Values

  • "auto" - The element automatically determines whether or not the horizontal Scroll bar should be visible or not.
  • "disabled" - Disables the horizontal Scroll bar.
  • "hidden" - Hides the horizontal Scroll bar.
  • "visible" - Shows the horizontal Scroll bar even if it is not necessary.

Default value

"auto"

Example

Set the verticalScrollBarVisibility property. 

 <smart-drop-down-button vertical-scroll-bar-visibility='hidden'></smart-drop-down-button>

Set the verticalScrollBarVisibility property by using the HTML Element's instance. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 dropdownbutton.verticalScrollBarVisibility = 'visible';

Get the verticalScrollBarVisibility property. 

 const dropdownbutton = document.querySelector('smart-drop-down-button');
 let verticalScrollBarVisibility = dropdownbutton.verticalScrollBarVisibility;

Events

actionButtonClickCustomEvent

This event is triggered when user clicks on the action button. The action button is visible when the placeholder is set.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onActionButtonClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the actionButtonClick event.

Example

Set up the event handler of actionButtonClick event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('actionButtonClick', function (event) {
	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the drop down is closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the close event.

Example

Set up the event handler of close event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the closing event.

Example

Set up the event handler of closing event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('closing', function (event) {
	// event handling code goes here.
})

dropDownButtonClickCustomEvent

This event is triggered when user clicks on the drop down button.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onDropDownButtonClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the dropDownButtonClick event.

Example

Set up the event handler of dropDownButtonClick event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('dropDownButtonClick', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered when the drop down is opened.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the open event.

Example

Set up the event handler of open event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the opening event.

Example

Set up the event handler of opening event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('opening', function (event) {
	// event handling code goes here.
})

resizeStartCustomEvent

This event is triggered when user starts resizing the drop down.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResizeStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeStart event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

resizeEndCustomEvent

This event is triggered when user finishes resizing the drop down.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResizeEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeEnd event. 

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

Methods

appendChild( node: Node): T

Arguments

nodeNode

The node to be appended

ReturnsNode

close(): void

Closes the dropDown.


Invoke the close method.

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.close();

Try a demo showcasing the close method.

open(): void

Opens the dropDown.


Invoke the open method.

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.open();

Try a demo showcasing the open method.

removeAll(): void

Removes everything from the drop down.


Invoke the removeAll method.

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.removeAll();

Try a demo showcasing the removeAll method.

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


Invoke the scrollTo method.

const dropdownbutton = document.querySelector('smart-drop-down-button');
dropdownbutton.scrollTo(20,20);

CSS Variables

--smart-drop-down-button-default-widthvar()

Default value

"auto"

smartDropDownButton default width

--smart-drop-down-button-default-heightvar()

Default value

"var(--smart-editor-height)"

smartDropDownButton default height

--smart-drop-down-button-drop-down-widthvar()

Default value

"var(--smart-editor-drop-down-width)"

smartDropDownButton drop down width

--smart-drop-down-button-drop-down-heightvar()

Default value

"var(--smart-editor-drop-down-height)"

smartDropDownButton drop down height