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