PositionType

API Reference: UI.FlexLayout.PositionType

PositionType allows you to position objects either relative or absolute. Default value is relative. If you want an item to be positioned to an exact point, you need to set it as absolute.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const TextAlignment = require('sf-core/ui/textalignment');
const Label = require('sf-core/ui/label');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myFlexLayout = new FlexLayout({
top: 0,
left: 0,
bottom: 0,
right: 0,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
backgroundColor: Color.WHITE
})
this.layout.addChild(myFlexLayout);
var label1 = new Label({
width: 80,
height: 80,
text: "RELATIVE",
positionType:FlexLayout.PositionType.RELATIVE,
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
width: 80,
height: 80,
positionType:FlexLayout.PositionType.RELATIVE,
text: "RELATIVE",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
width: 80,
height: 80,
top:200,
left:150,
positionType:FlexLayout.PositionType.ABSOLUTE,
text: "ABSOLUTE",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
}
);
module.exports = Page1;