Description
This widget arranges child widgets from left-to-right and widgets exceed that the Width, will be placed on the next line.
Details
In the Details panel of a Widget that is placed inside a Wrap Box, there are some settings that can be used to adjust how the Widget functions which are outlined below.
| Option | Description |
|---|---|
| Padding | This is the padding area between the slot and the content it contains. |
| Fill Empty Space | Determines if the slot should fill the remaining space on the line. |
| Fill Span when Less Than | This states that if the total available space in the wrap box drops below the specified threshold, the slot will attempt to fill the entire line. A value of 0 denotes that no filling will occur. |
| Horizontal Alignment | The alignment of the object horizontally. |
| Vertical Alignment | The alignment of the object vertically. |
Usage Example
The Wrap Box is useful when you want to arrange items within a container and have those items appear aligned and evenly spaced and automatically format the contents inside it based on the width of the container.
Take for example the image below where we have created a "shop" screen of sorts where several items are presented to the player.
The white images above could represent different items that the player could buy when clicking on an item, then clicking the purchase button. In our example say we wanted to remove the item from the shop when it has been purchased or add an item to the shop when the "sell" button is pressed (of course you would probably want a pop-up menu to select the item you want to sell but this should convey the idea).
For example, "buying" and removing items would automatically update the window:
As would "selling" and adding items (automatically wrapping when reaching the max width of the window):
It could also be used to keep things inside it arranged when resizing the window:
While the Wrap Box only checks width to determine when to arrange the Widgets within it, you could also use this in combination with a Scroll Box which will add a scroll bar when the amount of Widgets within the window becomes cut off allowing the user to scroll down to see the remaining Widgets.