Overflow toolbar control in SAP ui5 view

SAP UI5 OverflowToolbar Control , be based on sap.m.Toolbar, The toolbar is provided when its content is not suitable for the display area Overflow Behavior .

When the available space in the visible area of the container is insufficient ,OverflowToolbar The content of will move from right to left to the overflow area . Users can access its contents by opening the overflow button in a pop-up window .

Here is an example ：OverflowToolbar Button in , Conditions that can be displayed normally ：

Flag and Toggle The button cannot be displayed normally , Only in Overflow Area display ：

OverflowToolbar Is an adaptive container , It checks the available width and hides unsuitable parts .

Its purpose is to use simple controls , Such as sap. m.button and sap.m.label As content . Embed other adaptive container controls (sap.m.Breadcrumbs With the exception of ) Will lead to competition for available space —— Both controls calculate the available space based on the size of the other control , And change their width at the same time , The calculation of spatial distribution is incorrect .

The image below shows OverflowToolbar be known as content Of aggregation, It contains three sub controls ：

These three sub controls are in detail The defined position in the view ：

<m:OverflowToolbar>
				<m:ToolbarSpacer/>
				<m:Button type="Accept" text="Save"/>
				<m:Button type="Reject" text="Cancel"/>
			</m:OverflowToolbar>

OverflowToolbar Inherited from sap.m.Toolbar, This is a horizontal container , Most commonly used to display buttons 、 label 、 Selection and various other input controls .

By default , If the toolbar item has a width based on percentage ( for example ,sap.m.input and sap.m.slider) Or realized sap.ui.core.IShrinkable Interface ( for example , sap.m.text and sap.m.label), They are contractible . You can provide sap.m.ToolbarLayoutData To override this behavior .

Developers can use sap.m.toolbarseparator In front and behind sap.m.toolbar Add a visual separator between elements . The separator is related to the topic , It can be filled 、 Margin or line .

To add a horizontal space between toolbar items , Please use sap.m.toolbarspacer. You can define the width of the horizontal space , Or flexibly cover the remaining space between toolbar items ( for example , Push the item to the edge of the toolbar ).