SAP UI5 视图里的 OverflowToolbar 控件

简介: SAP UI5 视图里的 OverflowToolbar 控件

SAP UI5 OverflowToolbar 控件,基于 sap.m.Toolbar,该工具栏在其内容不适合显示区域时提供 Overflow 行为。


当容器可见区域的可用空间不足时,OverflowToolbar的内容会从右向左移动到溢出区域。用户可以通过溢出按钮在弹出窗口中打开它来访问其内容。


下面是一个例子:OverflowToolbar 里的按钮,能够正常显示的情况:

Flag 和 Toggle 按钮无法正常显示,只能在 Overflow 区域显示的情况:

OverflowToolbar是一个自适应容器,它检查可用宽度并隐藏不适合的部分内容。


它的目的是使用简单的控件,如 sap. m.button和 sap.m.label 作为内容。嵌入其他自适应容器控件(sap.m.Breadcrumbs除外)会导致对可用空间的争夺——两个控件都根据另一个控件的大小计算可用空间,并同时改变它们的宽度,导致空间分布的计算不正确。


下图显示了 OverflowToolbar 名为 content 的 aggregation,里面包含了三个子控件:

这三个子控件在 detail 视图里的定义位置:

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

OverflowToolbar 继承自 sap.m.Toolbar, 这是一种水平容器,最常用于显示按钮、标签、选择和各种其他输入控件。


默认情况下,如果工具栏项有基于百分比的宽度(例如,sap.m.input 和 sap.m.slider)或实现了 sap.ui.core.IShrinkable 界面(例如, sap.m.text 和 sap.m.label),它们是可收缩的。可以通过为工具栏项提供 sap.m.ToolbarLayoutData 来重写此行为。


开发人员可以使用 sap.m.toolbarseparator 在前面和后面的 sap.m.toolbar 元素之间添加一个视觉分隔符。分隔符与主题相关,可以是填充、边距或线。


要在工具栏项之间添加水平空间,请使用sap.m.toolbarspacer。可以定义水平空间的宽度,或者灵活地覆盖工具栏项目之间的剩余空间(例如,将项目推到工具栏的边缘)。


相关文章
|
26天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
2月前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
59 0
|
2月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
22 0
|
2月前
|
API
在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
【2月更文挑战第28天】 在阿里云RPA中,你可以使用"SetForegroundWindow"函数来将SAP控件置顶
23 1
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
31 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
26天前
|
XML Java Android开发
Android之UI基础控件
Android之UI基础控件
|
1月前
|
数据库
迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
10 0
迈入 SAP CDS View 世界的前置知识 - SAP ABAP 数据库视图介绍试读版
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
2月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0