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" (value descriptions in: ToolbarItemOverflowBehavior) |
| Default | "Default" |
preventOverflowClosing
| Description | Defines if the toolbar overflow popup should close upon interaction 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 |
close-overflow
| Description | Fired when the overflow popover is closed. |
| Type | CustomEvent |
| Since | 1.17.0 |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
For more information on how to use CSS custom states, see Usage of CSS Custom States.
| Name | Description |
|---|
| overflowed | When the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0. |