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
width
| 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 |
value
| Description | Defines the value of the component: |
| Type | string | undefined |
| Default | "" |
| Since | 2.15.0 |
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 |
Slots
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> |
label
| Description | Defines the HTML element that will be displayed in the component input part, representing the selected option. |
| Type | Array<HTMLElement> |
| Since | 2.15.0 |
Events
change
| Description | Fired when the selected option changes. |
| Type | CustomEvent<ToolbarSelectChangeEventDetail> |
| Parameters | selectedOption: HTMLElement
the selected option. |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
open
| Description | Fired after the component's dropdown menu opens. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | No |
close
| Description | Fired after the component's dropdown menu closes. |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.