SAPUI5预定义csss的使用

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所有的单边距

sapUiTinyMarginTop sapUiTinyMarginBottom sapUiTinyMarginBegin sapUiTinyMarginEnd

sapUiSmallMarginTop sapUiSmallMarginBottom sapUiSmallMarginBegin sapUiSmallMarginEnd

sapUiMediumMarginTop sapUiMediumMarginBottom sapUiMediumMarginBegin sapUiMediumMarginEnd

sapUiLargeMarginTop sapUiLargeMarginBottom sapUiLargeMarginBegin sapUiLargeMarginEnd

Two-Sided Margins

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

下面是sapui5所有的双边距

sapUiTinyMarginBeginEnd sapUiTinyMarginTopBottom

sapUiSmallMarginBeginEnd sapUiSmallMarginTopBottom

sapUiMediumMarginBeginEnd sapUiMediumMarginTopBottom

sapUiLargeMarginBeginEnd sapUiLargeMarginTopBottom

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

预定义css sample :https://sapui5.hana.ondemand.com/#/entity/sap.ui.core.StandardMargins