我们的应用程序内容仍然粘在信箱的角落里。要微调布局,可以向上一步添加的控件添加空白和填充。

我们将使用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的更多相关文章

  1. 孙鑫MFC学习笔记13:文档

    1.CArchive类保存内存数据 2.CAchive类重载了>>与<<操作符,类似C++文件流 3.在OnNewDocument中通过SetTitle设置标题 4.字符串资源 ...

  2. 13.Django1.11.6文档

    第一步 入门 检查版本 python -m django --version 创建第一个项目 django-admin startproject mysite 运行 python manage.py ...

  3. Java高级特性 第13节 解析XML文档(1) - DOM和XPath技术

    一.使用DOM解析XML文档 DOM的全称是Document Object Model,也即文档对象模型.在应用程序中,基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合(通常称DOM树 ...

  4. Python处理Excel文档(xlrd, xlwt, xlutils)

    简介 xlrd,xlwt和xlutils是用Python处理Excel文档(*.xls)的高效率工具.其中,xlrd只能读取xls,xlwt只能新建xls(不可以修改),xlutils能将xlrd.B ...

  5. SAP 常用增强记录文档

    转自:http://blog.csdn.net/budaha 20170215需要一个PR 修改保存时候的增强,目的是同步PR的处理状态 EBAN-STATU 到一个自建表ZTPRTOPO,记得有个P ...

  6. ABP文档 - 通知系统

    文档目录 本节内容: 简介 发送模式 通知类型 通知数据 通知重要性 关于通知持久化 订阅通知 发布通知 用户通知管理器 实时通知 客户端 通知存储 通知定义 简介 通知用来告知用户系统里特定的事件发 ...

  7. 这些.NET开源项目你知道吗?.NET平台开源文档与报表处理组件集合(三)

    在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...

  8. Xamarin技术文档------VS多平台开发

    此技术业余时间研究,仅供大家学习参考,不涉及深入研究,有一定开发基础的人员,应该都能较快上手. 一.简介 Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单.Xamarin的产品简 ...

  9. 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档(ASP.NET Core Web API 自动生成文档)

    对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...

  10. C# 复制PDF页面到另一个PDF文档

    C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...

随机推荐

  1. 【Android界面实现】AppWidght全面学习之电量监控小部件的实现具体解释

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bz419927089/article/details/35791047 前几天翻看之前下载的各种资料 ...

  2. SQL语言:DDL/DML/DQL/DCL

    SQL (Structure Query Language)语言是数据库的核心语言. SQL 的发展是从1974年开始的,其发展过程如下: 1974年-----由Boyce和Chamberlin提出, ...

  3. JVM 之:Java 内存区域与内存溢出

    内存区域 Java 虚拟机在执行 Java 程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java 虚拟机规范将 JVM 所管理的内存分为以下几个运行时数据区:程序计数器.Java 虚拟机 ...

  4. 解决首次访问jenkins,输入初始化默认密码之后,一直卡住问题,无法进行jenkins工具安装

    参考网址:http://www.cnblogs.com/520playboy/p/6244257.html 简介   安装系统:centos6.5 安装方式:在官网中下载jenkins.war,放到t ...

  5. Java HashMap原理

    HashMap存储结构 HashMap中数据的存储是由数组与链表一起实现的 数组寻址非常容易,其时间复杂度为O(1),但是当要插入或删除数据时,时间复杂度就会变为O(n).链表插入和删除操作的内存复杂 ...

  6. ML(4): 决策树分类

    决策树(Decision Tree)是用于分类和预测的主要技术,它着眼于从一组无规则的事例推理出决策树表示形式的分类规则,采用自顶向下的递归方式,在决策树的内部节点进行属性值的比较,并根据不同属性判断 ...

  7. 【Spring学习笔记-MVC-16】Spring MVC之重定向-解决中文乱码

    概述 spring MVC框架controller间跳转,需重定向,主要有如下三种: 不带参数跳转:形如:http://localhost:8080/SpringMVCTest/test/myRedi ...

  8. 【Spring学习笔记-MVC-6】SpringMVC 之@RequestBody 接收Json数组对象

    作者:ssslinppp       1. 摘要 程序流程: 前台使用ajax技术,传递json字符串到后台: 后台使用Spring MVC注解@RequestBody 接受前台传递的json字符串, ...

  9. ICE简介及C++程序例子(转)

    一.ICE简介: 1.ICE是什么? ICE是ZEROC的开源通信协议产品,它的全称是:The Internet Communications Engine,翻译为中文是互联网通信引擎,是一个面向对象 ...

  10. MySQL 日期类型及默认设置 (除timestamp类型外,系统不支持其它时间类型字段设置默认值)

    MySQL 日期类型及默认设置 之前在用 MySQL 新建 table,创建日期类型列时遇到了一些问题,现在整理下来以供参考. MySQL 的日期类型如何设置当前时间为其默认值? 答:请使用 time ...