The ui5-toolbar-spacer is an element, used for taking needed space for toolbar items to take 100% width.
It takes no space in calculating toolbar items width.
Properties
overflowGroup
| Description | Co-overflow tag. Items in the same ui5-toolbar whose overflowGroup is the same non-empty string overflow as one atomic unit: either all visible in the bar, or all in the overflow popover, never split. The empty string (the default) means "no group" — the item participates in overflow independently.
The tag is a free-form, case-sensitive string label (e.g. "filters", "search"). It is layout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a non-empty group must have overflowPriority = "Default"; AlwaysOverflow and NeverOverflow are forbidden inside a group — setting one of those on a grouped item emits a one-shot console.warn and the item's priority is treated as Default for the layout pass. Spacers (ui5-toolbar-spacer) do not participate in grouping; setting a non-empty overflowGroup on a spacer emits a one-shot console.warn and the spacer's existing overflow behavior is unchanged.
The visible bar always preserves slot order — ungrouped items between group members keep their slot positions and the toolbar never reorders DOM children. In the popover group members appear adjacent in slot order. |
| Type | string |
| Default | "" |
| Since | 2.27.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 | "AlwaysOverflow" | "Default" | "NeverOverflow" (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 |
width
| Description | Defines the width of the spacer.
Note: all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. |
| Type | string | undefined |
| Default | undefined |
Slots
No slots available for this component.
Events
No events available for this component.
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. |