Fiori学习笔记 - 预定义CSS的应用

最新推荐文章于 2025-04-28 17:09:04 发布

Carawangc

最新推荐文章于 2025-04-28 17:09:04 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Fiori 前端文章标签： fiori 预定义CSS sap-ui5 margin padding

本文链接：https://blog.youkuaiyun.com/Carawangc/article/details/78790101

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

Fiori

13 篇文章

订阅专栏

本文介绍了SAPUI5框架中预设CSS的使用方法，包括Margin和Padding的常用属性及其应用场景，并提供了示例代码。对于快速开发并保持一致性的UI设计非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SAP UI5是一个重量级的框架，也就是说它定制了很多CSS的样式以及自定义的一些组件，开发时不需要我们额外编写这些CSS属性，为开发节省了很多时间。这里就记录一下系统CSS的使用。预设CSS主要是针对于不同尺寸的Margin和Padding的一个设定。

margin常用的有以下四个属性：

Full Margin：控件四周的距离
Single-sided: 上下左右单一方向距离
Two-sided: 同时两个方向的距离值
Response Margin：响应式Margin

这里写图片描述

Full Margins
- sapUiTinyMargin (8px)
- sapUiSmallMargin(16px)
- sapUiMediumMargin(32px)
- sapUiLargeMarin(48px)
Single-Sided Margins
Two-Sided Margins
Responsive Margins
sapUiResponsiveMargin 针对不同尺寸进行自动调整，不包括sap.m.SplitApp。
- 小于600px时, 这时在下边距有一个16像素的边距，上左右的margin都为0
- 600-1023px时，这时在上下左右边距有一个16像素的边距
- 大于1023px时，这时在上下左右边距有一个32像素的边距

下面代码是将预设CSS添加到app中，这里需要注意的是width=”auto”, 在class=”sapUiLargeMarginBegin sapUiLargeMarginBottom”使用过程中，width不要设置成100%，而要用auto。

<mvc:View
      height="100%"
      controllerName="sap.m.sample.StandardMarginsEnforceWidthAuto.Page"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m">
      .
      .
      .
      <Panel width="auto" class="sapUiLargeMarginBegin sapUiLargeMarginBottom">
          <content>

          </content>
      </Panel>
<IconTabBar
  expanded="{device>/isNoPhone}"
  class="sapUiForceWidthAuto sapUiMediumMarginBeginEnd">
  <items>
        .
        .
        .
  </items>
</IconTabBar>
      .
      .
</mvc:View>