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" | "Success" | "Warning" | "Error" | "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 |
Default | "" |
accessibleNameRef​
Description | Receives id(or many ids) of the elements that label the select. |
Type | string |
Default | "" |
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. |
Description | Fired after the component's dropdown menu opens. |
Type | CustomEvent |
Description | Fired after the component's dropdown menu closes. |
Type | CustomEvent |
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.