当前位置:网站首页>Overflow toolbar control in SAP ui5 view
Overflow toolbar control in SAP ui5 view
2022-07-05 12:54:00 【Wang Zixi】
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 ).
边栏推荐
- Taobao short video, why the worse the effect
- Distributed solution - distributed session consistency problem
- Halcon 模板匹配实战代码(一)
- SAP UI5 DynamicPage 控件介紹
- Using docker for MySQL 8.0 master-slave configuration
- Shi Zhenzhen's 2021 summary and 2022 outlook | colorful eggs at the end of the article
- A deep long article on the simplification and acceleration of join operation
- [Nacos cloud native] the first step of reading the source code is to start Nacos locally
- [cloud native] use of Nacos taskmanager task management
- Free testing of Taobao tmall API order and flag insertion remark interface
猜你喜欢
stm32和电机开发(从架构图到文档编写)
About LDA model
我在滴滴做开源
上午面了个腾讯拿 38K 出来的,让我见识到了基础的天花
Didi open source Delta: AI developers can easily train natural language models
在家庭智能照明中应用的测距传感芯片4530A
Comprehensive upgrade of Taobao short video photosynthetic platform
Talk about my drawing skills in my writing career
从39个kaggle竞赛中总结出来的图像分割的Tips和Tricks
Laravel文档阅读笔记-mews/captcha的使用(验证码功能)
随机推荐
Transactions from January 14 to 19, 2022
Simply take stock reading notes (4/8)
jxl笔记
HiEngine:可媲美本地的云原生内存数据库引擎
Introduction to the principle of DNS
What is the difference between Bi software in the domestic market
OPPO小布推出预训练大模型OBERT,晋升KgCLUE榜首
Annotation problem and hidden Markov model
155. Minimum stack
SAP self-development records user login logs and other information
10 minute fitness method reading notes (5/5)
RHCSA3
How to connect the API interface of Taobao open platform (super detailed)
MySQL 巨坑:update 更新慎用影响行数做判断!!!
Iterator details in list... Interview pits
From the perspective of technology and risk control, it is analyzed that wechat Alipay restricts the remote collection of personal collection code
Transactions from January 6 to October 2022
Compilation principle reading notes (1/12)
SAP UI5 DynamicPage 控件介绍
Reshape the power of multi cloud products with VMware innovation