js css htmlSAPSAP 实用篇

SAP UI5 应用里一些容器控件的介绍

2022-12-25  本文已影响0人  _扫地僧_

sap.m.Shell 控件可用作应用程序的根元素。 它可以包含 App 或 SplitApp 控件。 Shell 为整个应用程序提供了一些总体功能,并负责在桌面浏览器平台上进行视觉适配,例如应用程序周围的框架。

sap.m.App: 该 App 继承自 sap.m.NavContainer 并因此提供其导航功能。 它将某些标头标签添加到 HTML 页面,这些标签在 SAP UI5 运行在移动设备上至关重要。

开发人员可以配置应用程序的主页图标(home icon)。

有一些选项可以使用 backgroundColor 和 backgroundImage 属性来设置背景颜色和背景图像。

默认情况下(isTopLevel 设置为 true)sap.m.App 遍历其父元素并自动将它们的高度设置为 100%.

sap.m.Page: 包含应用程序的整个屏幕的容器控件。sap.m.Page 是一个容器控件,它包含一个应用程序的整个屏幕。 该页面具有三个可以容纳内容的不同区域 - 页眉(header)、内容区域(content area)和页脚(footer).

标头(header)

页面的最顶部区域被页眉占据。 标准标题包括导航按钮和标题。开发人员也可以创建自己的自定义标头,该标头在 customHeader 聚合中定义。

Content Area

内容占据了页面的主要部分。 默认情况下只有内容区域是可滚动的。 这可以通过将 enableScrolling 设置为 false 来禁用其滚动行为。

footer

页脚是可选的,占据页面的固定底部。 或者,页脚可以浮动在内容底部的上方。 这是通过 floatingFooter 属性启用的。

注意:不同区域的所有可访问性信息及其相应的 ARIA 角色都在 sap.m.PageAccessibleLandmarkInfo 类型的聚合 landmarkInfo 中设置。

在 SAP Quartz 主题中使用 sap.m.Page 时,断点和布局填充可以由容器的宽度决定。 要启用此概念并将响应填充添加到页面控件的元素,可以根据用例添加以下 CSS 类:sapUiResponsivePadding--header、sapUiResponsivePadding--subHeader、sapUiResponsivePadding--content、sapUiResponsivePadding--footer、sapUiResponsivePadding- -浮动页脚。

上一篇下一篇

猜你喜欢

热点阅读