Possible values: 'none', 'simple', 'advanced'.
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Code examples

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;

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

Code examples

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;

Enables or disables the dropDown.

Code examples

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;

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.

Code examples

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;

Possible values: 'left', 'right', 'top', 'bottom'.
Determines position of the drop down button.

Code examples

Set the dropDownButtonPosition property.

 <smart-drop-down-button drop-down-button-position='top'></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 = 'bottom';

Get the dropDownButtonPosition property.

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

 let dropDownButtonPosition = dropDownButton.dropDownButtonPosition;

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.

Code examples

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;

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.

Code examples

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;

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.

Code examples

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;

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.

Code examples

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;

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.

Code examples

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;

Possible values: 'none', 'default', 'dropDownButton', 'auto'.
Determines when to open the dropDown.

Code examples

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;

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.

Code examples

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;

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

Code examples

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;

Possible values: '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.

Code examples

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;

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.

Code examples

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;

Sets additional helper text below the element.

Code examples

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;

Possible values: 'auto', 'disabled', 'hidden', 'visible'.
Determines weather or not horizontal scrollbar is shown.

Code examples

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;

Sets label above the element.

Code examples

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;

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

Code examples

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;

Callback, related to localization module.

Code examples

Set the localizeFormatFunction property.

 <smart-drop-down-button localize-format-function='function(){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(){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = dropDownButton.localizeFormatFunction;

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Code examples

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;

Determines whether the popup is opened or closed

Code examples

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;

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

Code examples

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;

Disables user interaction with the element.

Code examples

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;

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

Code examples

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;

Possible values: 'none', 'horizontal', 'vertical', 'both'.
Determines of the dropDown popup can be resized or not. Four: different modes are available:
- none - resizing is disabled.
- vertical - vertical resizing is allowed.
- horizontal - horizontal resizing is allowed.
- both - horizontal and vertical resizing is allowed.

Code examples

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;

Determines the theme. Theme defines the look of the element

Code examples

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;

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

Code examples

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;

Possible values: 'auto', 'disabled', 'hidden', 'visible'.
Determines weather or not vertical scrollbar is shown.

Code examples

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;

This event is triggered when user clicks on the action button. The action button is visible when dropDownOpenMode is set to 'dropDownbutton'.

Code examples

Bind to the actionButtonClick event by type: smartDropDownButton

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

 dropDownButton.addEventListener('actionButtonClick', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when the drop down is closed.

Code examples

Bind to the close event by type: smartDropDownButton

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

 dropDownButton.addEventListener('close', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when the drop down is closing.

Code examples

Bind to the closing event by type: smartDropDownButton

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

 dropDownButton.addEventListener('closing', function (event) {
     // event handling code goes here.
 }
 

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

Code examples

Bind to the dropDownButtonClick event by type: smartDropDownButton

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

 dropDownButton.addEventListener('dropDownButtonClick', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when the drop down is opened.

Code examples

Bind to the open event by type: smartDropDownButton

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

 dropDownButton.addEventListener('open', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when the drop down is opening.

Code examples

Bind to the opening event by type: smartDropDownButton

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

 dropDownButton.addEventListener('opening', function (event) {
     // event handling code goes here.
 }
 

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

Code examples

Bind to the resizeStart event by type: smartDropDownButton

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

 dropDownButton.addEventListener('resizeStart', function (event) {
     // event handling code goes here.
 }
 

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

Code examples

Bind to the resizeEnd event by type: smartDropDownButton

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

 dropDownButton.addEventListener('resizeEnd', function (event) {
     // event handling code goes here.
 }
 

Appends a new node to the drop down.

Code examples

Invoke the appendChild method.

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

 dropDownButton.appendChild(); 

Closes the dropDown.

Code examples

Invoke the close method.

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

 dropDownButton.close(); 

Opens the dropDown.

Code examples

Invoke the open method.

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

 dropDownButton.open(); 

Removes everything from the drop down.

Code examples

Invoke the removeAll method.

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

 dropDownButton.removeAll(); 

Removes a child node from the drop down.

Code examples

Invoke the removeChild method.

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

 dropDownButton.removeChild(); 

Scrolls the drop down to a specific position

Code examples

Invoke the scrollTo method.

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

 dropDownButton.scrollTo(20,20);