UI5-文档-4.13-Margins and Paddings
我们的应用程序内容仍然粘在信箱的角落里。要微调布局,可以向上一步添加的控件添加空白和填充。
我们将使用SAPUI5提供的标准类,而不是手工向控件添加CSS。这些类负责一致的分级步骤、从左到右的支持和响应性。
Preview
The layout of the panel and its content now has margins and padding
Coding
You can view and download all files at Walkthrough - Step 13.
webapp/view/App.view.xml
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"> <App> <pages> <Page title="{i18n>homePageTitle}"> <content> <Panel headerText="{i18n>helloPanelTitle}" class="sapUiResponsiveMargin" width="auto"> <content> <Button text="{i18n>showHelloButtonText}" press="onShowHello" class="sapUiSmallMarginEnd"/> <Input value="{/recipient/name}" valueLiveUpdate="true" width="60%"/> <Text text="Hello {/recipient/name}" class="sapUiSmallMargin"/> </content> </Panel> </content> </Page> </pages> </App> </mvc:View>
如果你减小屏幕尺寸,那么你就可以看到空白也减小了。顾名思义,页边距是响应性的,并根据设备的屏幕大小进行调整。平板电脑将获得更小的利润率,而处于纵向模式的手机将无法获得利润率,从而节省这些小屏幕的空间。为了布局面板,我们添加了CSS类sapUiResponsiveMargin,它将在面板周围添加一些空间。我们必须将面板的宽度设置为auto,否则空白将被添加到默认宽度100%并超过页面大小。
页边距可以添加到所有类型的控件中,并且在许多不同的选项中可用。我们甚至可以通过向按钮添加类sapUiSmallMarginEnd按钮和输入字段之间添加空间。
为了单独格式化输出文本,我们从输入字段中删除描述并添加一个具有相同值的新文本控件。在这里,我们也使用一个小的空白,以使其与其他内容对齐。类似地,我们可以添加标准的填充类来布局容器控件的内部部分,比如面板,但是由于它在默认情况下已经带来了填充,所以这里不需要这样做。
Conventions
如果可能的话,使用标准的SAPUI5 CSS类进行布局。
Parent topic: Walkthrough
Previous: Step 12: Shell Control as Container
Next: Step 14: Custom CSS and Theme Colors
Related Information
Using Predefined CSS Margin Classes
Using Container Content Padding CSS Classes
UI5-文档-4.13-Margins and Paddings的更多相关文章
- 孙鑫MFC学习笔记13:文档
1.CArchive类保存内存数据 2.CAchive类重载了>>与<<操作符,类似C++文件流 3.在OnNewDocument中通过SetTitle设置标题 4.字符串资源 ...
- 13.Django1.11.6文档
第一步 入门 检查版本 python -m django --version 创建第一个项目 django-admin startproject mysite 运行 python manage.py ...
- Java高级特性 第13节 解析XML文档(1) - DOM和XPath技术
一.使用DOM解析XML文档 DOM的全称是Document Object Model,也即文档对象模型.在应用程序中,基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合(通常称DOM树 ...
- Python处理Excel文档(xlrd, xlwt, xlutils)
简介 xlrd,xlwt和xlutils是用Python处理Excel文档(*.xls)的高效率工具.其中,xlrd只能读取xls,xlwt只能新建xls(不可以修改),xlutils能将xlrd.B ...
- SAP 常用增强记录文档
转自:http://blog.csdn.net/budaha 20170215需要一个PR 修改保存时候的增强,目的是同步PR的处理状态 EBAN-STATU 到一个自建表ZTPRTOPO,记得有个P ...
- ABP文档 - 通知系统
文档目录 本节内容: 简介 发送模式 通知类型 通知数据 通知重要性 关于通知持久化 订阅通知 发布通知 用户通知管理器 实时通知 客户端 通知存储 通知定义 简介 通知用来告知用户系统里特定的事件发 ...
- 这些.NET开源项目你知道吗?.NET平台开源文档与报表处理组件集合(三)
在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...
- Xamarin技术文档------VS多平台开发
此技术业余时间研究,仅供大家学习参考,不涉及深入研究,有一定开发基础的人员,应该都能较快上手. 一.简介 Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单.Xamarin的产品简 ...
- 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档(ASP.NET Core Web API 自动生成文档)
对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...
- C# 复制PDF页面到另一个PDF文档
C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...
随机推荐
- C语言发送邮件
c语言发送邮件Linux下使用c语言发送邮件 领导交代一个任务,需要将服务器上的df -hl的执行结果定时发给他. 尝试使用sendmail来发邮件,但是后来放弃了,并不是所有的服务器上都安装了sen ...
- 【转】每天一个linux命令(12):more命令
原文网址:http://www.cnblogs.com/peida/archive/2012/11/02/2750588.html more命令,功能类似 cat ,cat命令是整个文件的内容从上到下 ...
- velocity 知识点
velocity 教程: http://www.51gjie.com/javaweb/126 velocity 语法 语法 说明 关键字以#开头 定义数组 ['aaa','bbb'] 变量以$开头 把 ...
- mysql 事务隔离级别详解
事物的 隔离级别,说简单非常简单(新手也能说出 是个隔离级别 和 影响),说男也非常难.(很多 有几年编程 经验的程序员依旧搞不清楚) 废话不多少 直接开始: 事务的隔离级别 是用来描述 事务的读关系 ...
- ionic3之自定义tabs菜单图标
请参考以下链接 ionic3之自定义tabs菜单图标
- vuex基本熟悉与使用
vuex的入门与使用讲解 官网:https://vuex.vuejs.org/zh/guide/state.html 定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式 ...
- SQL的datetime类型数据转换为字符串格式大全
Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select CONVERT(varchar(100), GETDATE( ...
- mysql视图 新手的问答
☺ζั͡ޓއއއ๓º♥双٩(•(365335093) 16:03:02 创建的视图能保存多长时间,保存在哪啊 上天&宠儿(961431958) 16:08:59 数据库 上天&宠儿(9 ...
- 学习笔记之Bitbucket
Bitbucket | The Git solution for professional teams https://bitbucket.org/ Git Tutorials and Trainin ...
- apache 服务器在ubuntu上图片无法显示解决
很简单的一段代码实例: <!DOCTYPE html> <html> <body> <h2>Welcome here!</h2> <i ...