Joins

How to add and style 'joins'.

What is a Join?

A Join is a container for grouping multiple items. It is most commonly used to group buttons, but a join can also group accordion panels, inputs, or other parts.

The join applies a border radius to the first and last item. The join can be used to create a horizontal or vertical list of items.

Location in the Parts Library: Base Parts > Layout > Join

Styling a Join

The join part has an editor when the join is selected. It's important to know that the join editor will format the join itself, not the parts within it, meaning that properties are applied to the border radius of the join rather than the individual parts within it.

Here is an example in action. The image below shows two joins, each housing three buttons. The first join has a border applied to it, so the border surrounds the group of buttons. The second join has an outline applied to each button:

Changing the Orientation of the Join

To switch the orientation of a join, from horizontal to vertical or vice versa, select the join to activate the property editor on the right.

Then, select Orientation, and choose either horizontal or vertical. The orientation of the join can be changed based on device size.

Adding a Background Image to a Join

To add a background image to a join, select the join. In the property editor on the right, click on Image > Default to select your image from the Media Gallery or upload an image from your device.

The image will take up the full space of the join and will expand if more parts are added to the join. The image will remain in place also if the orientation of the join is changed from horizontal to vertical, or vice versa. See this in the example below:

Adjusting the Image Opacity

Remember that your join will have content inside (whether that's buttons or other parts), so if you want to change the opacity of the overlay content, then you’ll need to use the ‘Opacity’ tab in the Decoration Editor.