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
来源: https://www.2cto.com/kf/201805/747882.html