The ui5-toolbar-select component is used to create a toolbar drop-down list.
The items inside the ui5-toolbar-select define the available options by using the ui5-toolbar-select-option component.
ES6 Module Import​
import "@ui5/webcomponents/dist/ToolbarSelect.js";
import "@ui5/webcomponents/dist/ToolbarSelectOption.js"; (comes with ui5-toolbar-select)
Properties​
| Description | Defines the width of the select.
Note: all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. |
| Type | string | undefined |
| Default | undefined |
valueState​
| Description | Defines the value state of the component. |
| Type | "None" | "Positive" | "Critical" | "Negative" | "Information" |
| Default | "None" |
disabled​
| Description | Defines whether the component is in disabled state.
Note: A disabled component is noninteractive. |
| Type | boolean |
| Default | false |
accessibleName​
| Description | Defines the accessible ARIA name of the component. |
| Type | string | undefined |
| Default | undefined |
accessibleNameRef​
| Description | Receives id(or many ids) of the elements that label the select. |
| Type | string | undefined |
| Default | undefined |
overflowPriority​
| Description | Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it. |
| Type | "Default" | "NeverOverflow" | "AlwaysOverflow" |
| Default | "Default" |
preventOverflowClosing​
| Description | Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default. |
| Type | boolean |
| Default | false |
default​
| Description | Defines the component options.
Note: Only one selected option is allowed. If more than one option is defined as selected, the last one would be considered as the selected one.
Note: Use the ui5-toolbar-select-option component to define the desired options. |
| Type | Array<ToolbarSelectOption> |
| Description | Fired when the selected option changes. |
| Type | CustomEvent<ToolbarSelectChangeEventDetail> |
| Parameters | selectedOption: HTMLElement
the selected option. |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
| Description | Fired after the component's dropdown menu opens. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
| Description | Fired after the component's dropdown menu closes. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.