SAPUI5预定义css的使用实例讲解

01.对于CSS，有四种标准尺寸，即：微小--tiny (0.5rem或8px)，小--small (1rem或16px)，中等--small (2rem或32px)和大--small (3rem或48px)。

有四种外边距类型:

1.Full margins 四周都有外边距

2.Single-sided margin 顾名思义

3.Two-sided margins 顾名思义

4.Responsive margins 随着屏幕调整,边距也会调整

Full margins

你想改变控件四周的外边距,可以使用下面的class

sapUiTinyMargin

sapUiSmallMargin

sapUiMediumMargin

sapUiLargeMargin

Single-Sided Margins

单边距的class 是由大小+方向组成的如sapUiTinyMarginTop就表示距离上边距0.5rem!!

下面是sapui5所有的单边距

Two-Sided Margins

双边距也是是由大小+方向组成,不过是有2个方向组成的,如sapUiTinyMarginBeginEnd就表示距离左右外边距0.5rem!!

下面是sapui5所有的双边距

Responsive Margins

如果你页面在(smartphone, Mobile and desktop)运行,这个响应式布局非常合适!!随着屏幕大小的给变也跟着改变!!

Responsive Margins注意点

1.sapUiResponsiveMargin放置在sap.m.SplitApp控件Master.view.xml中时，将始终提供16px底部边距，不会随着屏幕大小改变而改变!!

2.在SplitApp的详细信息视图中，无论可用的屏幕宽度如何，sapUiResponsiveMargin控件周围都会有一个16像素的边距。不过，通常情况下，SplitApp响应式的。

注意:使用预定义的css,要保证控件上的with的属性不是100%,是100%将其改成with="auto"!如果您的控件没有宽度属性，但仍具有100%的默认宽度，则可以将我们的CSS类sapUiForceWidthAuto添加到您的控件，这可确保控件的默认宽度被值auto覆盖。这种控制的一个例子是sap.m.IconTabBar

<Panel width="auto" class="sapUiLargeMarginBegin
      sapUiLargeMarginBottom">

example::

<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>

Removing Margins--移除外边距

sapUiNoMarginTop

sapUiNoMarginBottom

sapUiNoMarginBegin

sapUiNoMarginEnd