In this tutorial blog you learn about Margins and paddings
in SAPUI5 applications. SAP has provided some predefined classes that you can
make use in the application for margin and padding purposes of your control
elements.
Margins and Padding are used for tuning the layout of the
sapui5 screens. We can customize the margins of particular controls manually,
by adding custom CSS. But we can also take use of predefined SAP provided CSS classes
and this is suggested by SAP since these classes take care of consistent sizing
steps, left to right support, and responsiveness.
Using these predefined classes; sapui5 provides the option
of adding spaces in between the controls by adding a margin. And these margins
clear an area around its respective control, outside of its border.
Margins are transparent and are not the part of control’s
clickable area, and they collapse with adjacent margins. There are 4 standard
sizes available, and they are tiny(8px), small(16px), medium(32px) and large(48px).
And there are 4 types of margins available:
Full Margins
This is used if you want to clear an area all round your
control, and this consists of:
sapUiTinyMargins
sapUiSmallMargins
sapUiMediumMargins
sapUiLargeMargins
Single-Sided
Margins
This would only clear only one side of the control plus you
will have to define which part of the control has to get the margin, for eg
top, bottom, begin, end. These are the classes:
sapUiTinyMarginTop
sapUiTinyMarginBottom
sapUiTinyMarginBegin
sapUiTinyMarginEnd
|
sapUiSmallMarginTop
sapUiSmallMarginBottom
sapUiSmallMarginBegin
sapUiSmallMarginEnd
|
sapUiMediumMarginTop
sapUiMediumMarginBottom
sapUiMediumMarginBegin
sapUiMediumMarginEnd
|
sapUiLargeMarginTop
sapUiLargeMarginBottom
sapUiLargeMarginBegin
sapUiLargeMarginEnd
|
Two-Sided Margins
This would clear spaces on the two sides, either top and
bottom or begin or end. And these are the classes provided by sap:
sapUiTinyMarginBeginEnd
sapUiTinyMarginTopBottom
|
sapUiSmallMarginBeginEnd
sapUiSmallMarginTopBottom
|
sapUiMediumMarginBeginEnd
sapUiMediumMarginTopBottom
|
sapUiLargeMarginBeginEnd
sapUiLargeMarginTopBottom
|
Responsive Margins
If the application is to run on different devices like
mobiles, tablets, desktop then one must choose responsive margins, as they
automatically align to the screen sizes. sapUiResponsiveMargin
class is for responsiveness .
We can also remove margins, with the
help of predefined sap class, like for example some of the controls comes with
a margin, and then you don’t want to use the margin for a particular reason,
then you can remove the margins by the predefined classes. If you don’t want
any margin at all, then use sapUiNoMargin. Otherwise use
particular margins, some of them are:
- sapUiNoMarginTop
- sapUiNoMarginBottom
- sapUiNoMarginBegin
- sapUiNoMarginEnd
Example
In this particular scenario, I have a view which consist of
a Page, which includes an image, texts, buttons, icontabfilters, input fields.
I will implement margin to the sap.m.App and then to the image. This would make
you understand the concept of margins and paddings.
I am sharing the portion of code for the UI and I have
highlighted the portion of code where I have used the class.
<mvc:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns="sap.m" controllerName="sap.myApp.controller.App"
xmlns:html="http://www.w3.org/1999/xhtml">
<App class="sapUiResponsiveMargin"
width="auto">
<pages>
<Page title="Title of the
page">
<content>
<IconTabBar id="idIconTabBar"
>
<items>
<IconTabFilter id="idTab1"
text="IconTabFilter1">
<Image
src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688" class="sapUiSmallMargin"/>
<Input value="{Cars>/Car/CarModel}"
description="Hello {Cars>/Car/CarModel}"
valueLiveUpdate="true" width="50%"
/>
<core:Fragment fragmentName="sap.myApp.view.NewFragment"
type="XML"/>
<mvc:XMLView viewName="sap.myApp.view.NewView"/>
</IconTabFilter>
Here, I
have used the class in sap.m.App, also I have kept the width = “auto” , since
if we run the application on different devices, the margin would be adjusted
accordingly. For a tablet the margin width would be less automatically and for
a mobile device there won’t be any margin at all so as to save space.
Similarly,
I have used class="sapUiSmallMargin”
for the image, a small margin would be maintained around the image.
Output
Before
Output
After
The difference in the margins is showed through a red line
border.
Hope, you understood the tutorial blog. Do share the
feedback in the comment section and if you have any doubts relating to this,
mail me at
sapui5tutors@gmail.com or
just comment down your queries. Happy to help
J
5 comments
Click here for commentsUseful Documents...!!
ReplySuperbly Documented & explained. very helpful for beginner
ReplyThanks!
ReplyThank you so much sanjo for the blogs.... very helpful
Replygood for noobies :)
ReplyConversionConversion EmoticonEmoticon