Step 13: Margins and Paddings
Step 13: Margins and Paddings
边距和填充
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<Shell>
<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>
</Shell>
</mvc:View>
sapUiResponsiveMargin :添加边距,边距会根据页面大小自动调整,pad和phone都会自动调整。width:auto,宽度自动调整。
sapUiSmallMarginEnd :在按钮和文本框间,加边距。
sapUiSmallMargin:保证和前面的按钮和输入框在水平方向对齐。
约定:尽量使用SAPUI5的CSS
vx:xiaoshitou5854