SAP UI5 里 FlexBox 的使用方法

news2024/12/23 13:20:45

ScrollContainer 的使用方式:

ScrollContainer 是一个控件,可以在有限的屏幕区域内显示任意内容,并提供滚动以使所有内容都可访问。注意,为了避免影响用户使用体验,不要嵌套沿相同方向滚动的滚动区域。例如,在启用滚动的页面控件(Page Control)内垂直滚动的 ScrollContainer——这种多重滚动条会让用户无所适从。

sap.m.FlexBox 控件允许开发布局以适应可用空间,并避免未使用的空间或溢出。

用户界面通常必须适应不同的屏幕尺寸。 因此,以单一布局可靠地适合可用屏幕空间的方式构建用户界面,很多时候会给开发人员带来挑战。 这种情况下可以嵌套 FlexBox 控件以创建更复杂的布局。

FlexBox 控件的两个主要用途是:

  • 二维布局
  • 实现灵活的布局

给 FlexBox 添加子控件,有下列两种方式:

  1. addItem 方法
var oMyFlexbox = new sap.m.FlexBox();
oMyFlexbox.addItem( new sap.m.Button({text: "Button 1"}) );
oMyFlexbox.addItem( new sap.m.Button({text: "Button 2"}) ); 
  1. 使用 items 聚合:
var oMyFlexbox = new sap.m.FlexBox({
  items: [
    new sap.m.Button({text: "Button 1"}),
    new sap.m.Button({text: "Button 2"})
  ]
});

效果如下:

一些影响布局的属性需要在 FlexBox 控件中设置。 其他属性可以附加到通过 layoutData 聚合放置在 FlexBox 内的控件。 例如,布局方向在 FlexBox 中通过如下属性设置:

var oMyFlexbox = new sap.m.FlexBox({
  items: [
    new sap.m.Button({text: "Button 1"}),
    new sap.m.Button({text: "Button 2"})
  ],
  direction: "Column"
});

效果如下:

FlexBox 控件是 CSS 中灵活框布局属性的包装器。控件呈现器在适当的 HTML 元素上设置 CSS 属性(包括必要时的前缀版本)。实际的布局是由浏览器完成的。

开发人员放置在 FlexBox 控件中的控件分别包装在 DIV 或 LI 元素中,具体取决于 renderType 属性。 所有元素都放置在另一个 DIV 或 UL 容器内,同样取决于 renderType。 如果使用 Bare 作为 renderType,则元素将在没有包装 HTML 标记的情况下呈现。 最外层的元素代表所谓的弹性容器,而其子元素是弹性项目。 上述所有示例生成的 HTML 结构如下所示:

<div class="sapMFlexBox">

       <div class="sapMFlexItem">

              <button id="__button1">Button 1</button>

       </div>

       <div class="sapMFlexItem">
              
              <button id="__button2">Button 2</button>

       </div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/111740.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LaTex】基础语法框架快速入门教程——Tex live+TexStudio简要安装及使用教程

0. 引言 LaTeX对于论文排版有着巨大的便利&#xff0c;并且对于参考文献的引用也十分方便&#xff0c;不会出现使用word引用参考文献一旦更改文献引用顺序&#xff0c;就必须全部改编号的情况。这里记录一下如何从0开始学习使用LaTeX书写论文。 1. 软件安装&环境配置 1.…

Qt中实例化一个函数变量时加不加括号的区别,以及括号中的this的使用

一、设计一个测试小程序 废话不多说&#xff0c;直接上代码。 main.h函数就不多说了&#xff0c;没改动。直接上mainwindow.h&#xff0c;也没改动。看mainwindow.cpp的内容。 #include "mainwindow.h" #include "ui_mainwindow.h" #include "test.…

机器学习算法基础——KNN算法

KNN (K-Nearest Neighbor)–K近邻分类算法 • 为了判断未知实例的类别&#xff0c;以所有已知类别的实例作为参照选择参数K • 计算未知实例与所有已知实例的距离 • 选择最近K个已知实例 • 根据少数服从多数的投票法则(majority-voting)&#xff0c;让未知实例归类为K个最邻…

Zerobot僵尸网络出现了新的漏洞利用和功能

©网络研究院 Zerobot DDoS僵尸网络已经获得了重大更新&#xff0c;扩展了其针对更多互联网连接设备和扩展网络的能力。 微软威胁情报中心 (MSTIC)正在以DEV-1061的名称跟踪持续的威胁&#xff0c;名称为未知、新兴或发展中的活动群集。 本月早些时候&#xff0c;Fort…

2022年山东省职业院校技能大赛中职组“网络安全”赛项规程

2022年山东省职业院校技能大赛中职组“网络安全”赛项规程一、赛项名称赛项名称&#xff1a;网络安全英文名称&#xff1a;Cyber Security赛项组别&#xff1a;中职组赛项类别:电子与信息类二、竞赛目的网络空间已经成为陆、海、空、天之后的第五大主权领域空间&#xff0c;习总…

SpringCloud 网关组件 Zuul-1.0 原理深度解析

为什么要使用网关&#xff1f; 在当下流行的微服务架构中&#xff0c;面对多端应用时我们往往会做前后端分离&#xff1a;如前端分成 APP 端、网页端、小程序端等&#xff0c;使用 Vue 等流行的前端框架交给前端团队负责实现&#xff1b;后端拆分成若干微服务&#xff0c;分别…

k8s使用glusterfs(静态供给、动态供给)、glusterfs的安装与使用

目录前言主机准备配置主机名、关闭防火墙、关闭selinux挂载磁盘安装glusterfs服务端glusterfs的端口分布式集群的结构组成glusterfs集群创建存储卷启动卷k8s使用glusterfs作为后端存储&#xff08;静态供给glusterfs存储&#xff09;恢复初始化环境安装Heketi 服务&#xff08;…

如何快速读懂开源代码?

文章目录**RUN起来****调试****把控关键数据结构和函数****从小的开始****关注一个模块****工具****一、阅读开源代码存在的一些误区**二、阅读代码的心态**三、阅读源码与**辅助材料**四、如何阅读开源代码****《gdb 高级调试实战教程》电子书下载链接&#xff1a;**1 下载 Ng…

ASP.NET开源版MES加工装配模拟系统源码/WinForm工厂加工装配系统源码/流程工序管理

一、源码描述 本系统用户大学机械科上位机加工装配模拟实验&#xff0c;目前正常用于实验当中。环境&#xff1a;VS2010(C# .NET4.0,多层结构)、sqlserver2008 r2 &#xff1b;Winform;使用到RFID读写器&#xff08;设备是可以变更的&#xff0c;修改RFID.Library项目的…

Mycat2(一)简介、分库分表概念

文章目录mycat是什么&#xff1b;为什么要用&#xff1b;mycat的作用原理分库分表的意义数据库优化的层次&#xff1a;数据切分的方式&#xff0c;带来的问题和解决方案分库分表带来的问题mycat的特性与详细配置含义mycat2与mycat1.6区别mycat2映射模型多数据源解决方案mycat核…

JavaScript控制元素(标签)的显示与隐藏

使用JavaScript有多种方式来隐藏元素&#xff1a; 方式一、使用HTML 的hidden 属性&#xff0c;隐藏后不占用原来的位置 hidden 属性是一个 Boolean 类型的值&#xff0c;如果想要隐藏元素&#xff0c;就将值设置为 true&#xff0c;否则就将值设置为false 【HTML hidden 属性…

【STM32+cubemx】0030 HAL库开发:DDS芯片AD9833实现简单的波形发生器

大家好&#xff0c;我是学电子的小白白&#xff0c;今天带大家了解一款波形发生器芯片——AD9833。 AD9833是AD公司出品的一款DDS波形发生器&#xff0c;能够产生正弦波、三角波和方波输出。 1&#xff09;什么是DDS 通俗来讲&#xff0c;DDS是一种把波形预先存储在芯片内部的…

H5对接NSS主扫遇到的一些问题

需要对接以下这些钱包&#xff1a; WXPAY(微信)ALIPAY&#xff08;支付宝&#xff09;LINEPAY&#xff08;linePay&#xff09;PAY_PAY (PayPay)RAKUTEN_PAY&#xff08;乐天&#xff09;MER_PAY(MerPay)AU_PAY(auPay)DOCOMO_PAY&#xff08;Dpay&#xff09;判断钱包类型 这…

注册中心Nacos

Nacos是Spring Cloud Alibaba提供的一个软件 这个软件主要具有注册中心和配置中心(课程最后讲解)的功能 我们先学习它注册中心的功能 微服务中所有项目都必须注册到注册中心才能成为微服务的一部分 注册中心和企业中的人力资源管理部门有相似 当前微服务项目中所有的模块,在…

用户购车旅程转变下,深度运营中的难点痛点如何突破?

在数字互联的营销环境下&#xff0c;消费者的购车旅程和用户行为发生了极大的改变&#xff0c;线上决策比重逐渐增强&#xff0c;到店决策周期越来越短&#xff0c;消费者可以在线完成70%-80%的车型甄选和决策。在这种环境下&#xff0c;未来如何实现更高效的用户运营和快速的销…

Python基础(十八):学员管理系统应用

文章目录 学员管理系统应用 一、系统简介 二、步骤分析 三、需求实现 1、显示功能界面 2、用户输入序号&#xff0c;选择功能 3、根据用户选择&#xff0c;执行不同的功能 4、定义不同功能的函数 学员管理系统应用 一、系统简介 需求&#xff1a;进入系统显示系统功能…

汽车租赁小程序源码 上门取车

小程序端&#xff1a; 首页、订单、我的 上门取送&#xff1a;仅限上门取送范围、到店取还&#xff1a;为您推荐最近的门店 套餐1、领优惠券、签到积分、限时活动、车型推荐 订单&#xff1a;订单中心、短租订单、长租订单 个人中心&#xff1a;我的优惠、租车券、优惠券、…

Android入门第55天-在Android里使用OKHttp组件访问网络资源

简介 今天的课程开始进入高级课程类了&#xff0c;我们要开始接触网络协议、设备等领域编程了。在今天的课程里我们会使用OKHttp组件来访问网络资源而不是使用Android自带的URLConnection。一个是OKHttp组件更方便二个是OKHttp组件本身就带有异步回调功能。 下面就进入课程。…

《北京市数字经济促进条例》图解来了

《北京市数字经济促进条例》 2023/1/1 二十大对建设数字经济作出重要部署。党的二十大报告中指出&#xff0c;“加快建设网络强国、数字中国”、“加快发展数字经济&#xff0c;促进数字经济和实体经济深度融合&#xff0c;打造具有国际竞争力的数字产业集群”。习总书记强调…

【算法】P1 算法简介

算法什么是算法正确与错误的算法算法可以解决什么问题本专栏有哪些算法什么是算法 算法 (Algorithm) 取某个值或集合作为 输入&#xff0c;并产生某个值或集合作为 输出。算法就是把输入转换为输出的计算&#xff0c;描述这个计算的过程来实现输入与输出的关系。 正确与错误的…