FlexWrap

API Reference: UI.FlexLayout.FlexWrap

This property specifies whether children of FlexLayout are forced into a single row or can be wrapped onto other rows. It works like FlexWrap on CSS. Please refer to the following guide for more information: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Defaults to: UI.FlexLayout.FlexWrap.NO_WRAP

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;
}
});
var myFlexLayout = new FlexLayout({
top: 0,
left: 0,
bottom: 0,
right: 0,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
flexWrap: FlexLayout.FlexWrap.NOWRAP,
backgroundColor: Color.WHITE
})
this.layout.addChild(myFlexLayout);
var label1 = new Label({
width: 80,
height: 80,
text: "1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
width: 80,
height: 80,
text: "2",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
width: 80,
height: 80,
text: "3",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
var label4 = new Label({
width: 80,
height: 80,
text: "4",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#f1c40f")
})
var label5 = new Label({
width: 100,
height: 80,
text: "5",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#e77e23")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
myFlexLayout.addChild(label4);
myFlexLayout.addChild(label5);
}
);
module.exports = Page1;

FlexWrap.NOWRAP

FlexWrap.WRAP