티스토리 뷰

SAPUI5

Step 13: Margins and Paddings

선즈반 2018. 12. 6. 10:26

Step 설명

app 컨텐츠는 여전히 letterbox의 코너에 붙어 있습니다. app의 레이아웃을 미세조정하기 위해 이전 스텝에서 추가한 컨트롤에 margin과 padding을 추가할 수 있습니다.

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">
	<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>
</mvc:View>

panel을 배치하기 위해 panel 주위에 약간은 공간을 추가하는 CSS 클래스 'sapUiResponsiveMargin' 추가합니다. 그렇지 않으면 margin이 기본 넓이 100%에 추가되고 page 사이즈를 초과하므로 auto로 panel의 width를 설정해야 합니다.

만약 화면 사이즈를 줄이면 실제로 margin 또한 줄어드는 것을 볼 수 있습니다. 이름에서 유추할 수 있듯이 margin은 반응형이며 기기의 화면 사이즈에 맞게 변합니다.태블릿들은 margin이 작아지고 세로모드의 phone들은 작은 화면의 공간을 절약하기 위해 margin이 없습니다.

margin은 모든 종류의 컨트롤에 추가될 수 있고 많은 다른 옵션으로 사용할 수 있습니다. 버튼에 'sapUiSmallMarginEnd ' 클래스를 추가하여 버튼과 input 필드 사이에 공간을 추가할수도 있습니다.

출력 텍스트를 개별적으로 서식을 지정하기 위해 input 필드의 설명을 제거하고 동일한 값을 가지는 새로운 'Text' 컨트롤을 추가합니다. 다른 내용과 이것을 맞추기 위해 작은 margin을 사용합니다. 비슷하게 panel과 같이 컨테이너 컨트롤의 안쪽 부분에 배치하기 위해 스탠다드 padding 클래스들을 추가할 수도 있습니다. 하지만 기본으로 padding을 가지고 있기 때문에 여기서는 필요하지 않습니다.


Conventions

- 가능한한 layout에 SAPUI5의 스탠다드 CSS 클래스를 사용합니다.


'SAPUI5' 카테고리의 다른 글

Step 15: Nested Views  (0) 2018.12.06
Step 14: Custom CSS and Theme Colors  (0) 2018.12.06
Step 12: Shell Control as Container  (0) 2018.12.06
Step 11: Pages and Panels  (0) 2018.12.06
Step 10: Descriptor for Applications  (0) 2018.12.06
댓글