SAP UI5 sap.m.Table 实现响应式布局的两种配置模式

简介: SAP UI5 sap.m.Table 实现响应式布局的两种配置模式

响应式配置有两种方式:自动弹出模式和手动弹出模式(sap.m.Table,属性:autoPopinMode)。


自动弹出模式(autoPopinMode)确保自动响应,并且在大多数场合下已经足够。开发人员仍然可以影响每列的行为,不过影响范围有限。


手动模式更灵活,但需要更多的配置。当可以显示/隐藏或重新排序表格列时,此配置变得更加麻烦。但这些额外的付出也有回报:


只有手动模式能够允许开发人员:


让表格布局中多留一列

一次将多列移动到弹出区域

在这两种模式下,响应式表格确保至少一列始终保留在表格布局中。


自动弹出模式

自动弹出模式自动处理响应。 您可以通过调整每列的行为在一定程度上优化这一点。


列有最小宽度。 一旦所有可见列的宽度超过表格宽度,最右边的列就会移动到弹出区域。 每列的默认最小宽度为 8 rem。 您可以为每一列更改此值(sap.m.Column,属性:autoPopinWidth)。


要进一步影响行为,您可以为列分配优先级。 低优先级列首先移动到弹出区域(首先是最右边的低优先级列),然后是中优先级列,最后是高优先级列。 默认优先级为“无”,处理方式与“中等”优先级相同(sap.m.Column,属性:importance)。


除了将列移动到弹出区域之外,您还可以隐藏一个或多个优先级的列(属性:hiddenInPopin)。


在自动弹出模式下,所有其他与弹出相关的列设置都将被忽略。



image.png




相关文章
|
前端开发 容器
SAP UI5 里 FlexBox 的使用方法
SAP UI5 里 FlexBox 的使用方法
SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
|
XML 搜索推荐 数据可视化
SAP UI5 SmartTable column 的个性化设置使用概述
SAP UI5 SmartTable column 的个性化设置使用概述
|
API Apache
SAP UI5 和 OpenUI5 的区别和联系
SAP UI5 和 OpenUI5 的区别和联系
|
数据可视化
SAP UI5 的规则构建器控件介绍
SAP UI5 的规则构建器控件介绍
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之九十五 - SAP UI5 下拉菜单(Select) 控件的使用方式试读版
SAP UI5 应用开发教程之九十五 - SAP UI5 下拉菜单(Select) 控件的使用方式试读版
无法在SAP Fiori UI上添加扩展字段?原因可能就在这里
无法在SAP Fiori UI上添加扩展字段?原因可能就在这里
无法在SAP Fiori UI上添加扩展字段?原因可能就在这里
SAP Fiori图标(icon)设计原理:一个可以查看 SAP UI5 所有可用图标的工具
SAP Fiori图标(icon)设计原理:一个可以查看 SAP UI5 所有可用图标的工具
269 0
SAP Fiori图标(icon)设计原理:一个可以查看 SAP UI5 所有可用图标的工具
|
Web App开发 前端开发 搜索推荐
SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来改变UI显示风格
SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来改变UI显示风格
162 0
SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来改变UI显示风格