SAP UI5 FlexBox Layout 布局的概念和具体使用案例介绍试读版
SAP UI5 官网提到了所谓 FlexBox Layout 布局的概念。文档提到,FlexBox 布局可以让 SAP UI5 界面上的控件充分利用屏幕可用空间,避免空间的浪费或者控件之间出现重叠的现象发生。
其实这个 FlexBox 布局并非 SAP UI5 独创,而是 HTML 支持的标准布局方式之一,sap.m
命名空间下的 FlexBox
,只是对这种布局方式的包装器,方便 SAP UI5 应用开发人员使用罢了。
我们首先来简单了解一下 HTML 支持的 Flex 布局。
158 文件夹下有个文件 example.html
,我们直接用浏览器打开,看到如下效果:
简单看看这个文件的源代码实现:我们把三个 div 元素,放置到了另一个具有 css 类,flex-container
的 div 元素内。后者的 css 类具有一行属性,在第 6 行代码进行维护:display: flex
拥有属性 display: flex
的 HTML 元素,会被浏览器当作一个 Flex 容器处理,这个元素里所有的直接子元素,都被浏览器看作 Flex 容器内的 item 元素,从而进行 Flex 布局。所谓 Flex 布局,即 Flex 容器内的子元素,会尽可能填充容器内的可用空间。如果 Flex 容器内部有多个子元素,则这些子元素们填充可用空间的比例,通过每个子元素的 flex-grow 属性指定。
如上图第 23~25 行代码所示,三个子元素通过 flex-grow
属性分别指定了填充比例为 1:2:3,也就是说,把它们的父元素 div 标签内的可用元素划分成 6 份,三个 div 子元素分别占据 1 份,2 份和 3 份。
Chrome 开发者工具对 flex 布局的支持较好,可以在开发者工具里直接查看和动态修改 Flex 容器的各种属性。
(1) 上图左边的小图标提示当前的元素是一个 flex 布局的容器 (2) 上图右边的图标允许前端开发人员,在 Chrome 开发者工具里面通过不修改源代码的情况下,动态修改 flex 容器的其他属性
比如我们通过 Chrome 开发者工具将 flex-direction 设置为 row-reverse
之后,flex 容器内的子元素,就会按照它们在源代码里出现的位置相反
的顺序进行布局,如下图所示:
在 Layout
标签页下面还有个 Flexbox
区域,点击 checkbox,可以用用开发人员指定颜色的虚线,显示 flex 容器的轮廓。
学习了 HTML 标准的 flex 知识后,我们就可以进一步了解 FlexBox 布局在 SAP UI5 里的实现了。
具体介绍请阅读笔者这篇文章。
相关文章
- SAP UI5 sap.ui.export.Spreadsheet API 介绍
- SAP UI5 sap.ui.Device.media 的使用介绍
- 如何打通 SAP Cloud for Customer 系统和微信公众号的双向消息通信功能
- SAP 官方的在线课程网站:Open SAP
- SAP UI5 Mock Server 在响应 OData 请求时的单步调试
- 「SAP ABAP」OPEN SQL的DML语句你了解多少 (附超详细案例讲解)
- SAP UI5 sap.m.Table Manual Pop-In Mode 概述
- SAP Fiori Launchpad url 参数 sap-app-origin-hint 的含义
- 安装SAP,Linux获台前瞻未来(linux安装sap)
- SAP ABAP将大数据量排序后输入到内表详解编程语言
- Sap 常用Function 说明详解编程语言
- SAP生产订单屏幕增强(CO01/CO02/CO03抬头AUFK,AFKO)详解编程语言
- SAP ABAP 输出Excel文件实例—-现金流量表输出—-(备忘)详解编程语言
- sap的内核升级,修补了源代码保护的方式详解编程语言
- SAP 系统的配置传输 同/异服务器之间,TR请求传输详解编程语言
- sap可配置BOM的主要流程详解编程语言
- SAP query传输以后需要重新生成程序详解编程语言
- SAP选择屏幕中实现三级联动下拉框效果详解编程语言
- SAP中用json数据格式调用http接口发送短信邮件案例详解编程语言
- Oracle与SAP在仓储领域的联姻(仓库oracle和sap)
- SAP与Oracle比较:优缺点及应用案例(saporacle对比)
- 缓存使用SAP创建Redis缓存,实现高效稳定加速(sap如何创建redis)
- Oracle和SAP技术比较优势和劣势(oracle与sap比照)
- 跨界合作新模式 Oracle与SAP实现合并(oracle与sap合并)
- 聘请高级Oracle与SAP顾问,拓展业务潜力(oracle sap顾问)
- Oracle和SAP教程一步一步学习(oracle sap教程)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)