Add Responsive Wrapping Using WrapLayout
We will use the WrapLayout component to create a layout that wraps UI widgets to a new row or column if no space is left in a NativeScript app.
[00:00] Start by adding a wrap layout to your page. And we're going to set a width on the wrap layout, so we can really see the visual effect once we run this. Inside of the wrap layout, we need a few view components to fill the space. We'll start with a label, put the text set to 'hello'. And we're also going to use background color to really see the wrap layout here in effect.
[00:30] We'll add another label with the text 'goodbye', background color of yellow, another label with the text of 'egghead', background color 23489DBE as a hex. And last, we use another label with the text 'set to go home' and background color equal to pink. And again, to see this in effect, we're going to set a few properties that you might not normally need, such as the width on these child items. And we're going to use '70' on each of these labels.
[01:22] And when we run this, we should see three items on the first row and this last label should wrap. And here, you see the first label, the second label, third, and fourth. The fourth label is wrapped because all four items have greater width, when they're combined, than the entire wrap layout of 250. If we change this to 280, which would be the sum of the four labels' widths, they should be on one row. And here, you see one, two, three, four all on the first row.
[02:02] The wrap layout also provides the orientation property, which you can set to vertical. The default is horizontal. When you run this, the wrap will present items in a column.