第13步:外边距和内边距

最新推荐文章于 2023-09-24 21:25:15 发布

真的是我太天真

最新推荐文章于 2023-09-24 21:25:15 发布

阅读量280

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/sdk#/topic/17b87fbafb5a4474982760d2a3a73e69

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

我们将使用SAPUI5提供的标准类，而不是手动向控件添加CSS。这些类负责一致的分级步骤，从左到右的支持和响应性。

预览

在这里插入图片描述

面板及其内容的布局现在有了边距和填充

代码

你可以在演练-第13步查看和下载所有文件。

webapp/view/App.view.xml
在这里插入图片描述

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