Axure Tutorial: Make Masonry Layout Cards
Introduction
This tutorial introduces the method of making masonry Layout Cards with repeater, which supports deleting the cards and automatically filling the positions after deletion, so as to ensure the integrity of masonry layout.
Features to be Realized
1. The images in the card have different heights, so as to realize the masonry layout.
2. When deleting a card, the following card will be filled automatically.
How to Realize these Features
1. Make cards list through repeaters. And the height of the image in the card is adjusted according to the data of the corresponding column of the repeater. So as to realize the masonry style layout.
2. Sets the context panel to show when the card is hovered. When you click any button on the panel, delete the current row of the repeater and add a new row.
Preview the completed prototype for this tutorial
Widgets Setup
1. Drag a Repeater-Card widget into the canvas and adjust its image, heading and paragraph to the appropriate position. Because we want to make a layout of 2 columns and 8 items, we need to add more data.
3.Create a rectangle, set the bottom round corner to 6 pixel, add color, and select the title and paragraph text to create a dynamic panel named Card text. Group the Image Panel, Heading and paragraph text and name it card.
4. Set the repeater layout to "Vertical" and "Warp(Grid)", and the number of items in each row is 4.
Note: the number of items in each row can be set to any value m, for example, the number of data row written in the repeater = 2m, and the waterfall flow is shown in two columns; If the number of data rows written in the repeater = 3M, the waterfall flow is displayed as three columns... And so on.
Set the repeater Pagination to Multiple Pages, the number of Items per page is 8, and the Starting page is 1.
Set the repeater Row Spacing = 10, Column Spacing = 10.
4. Make a card hovering scrim and add 3 buttons in the middle. Group 3 buttons and name it Buttons, Group the three buttons and scrim and name it Context.
Interactions Setup
Repeater interactions
1. First, adjust the size of the Image Panel when item loaded. The size of the dynamic panel is set to the size of the Height column of the repeater table.
2. Set the Image height to the height of the Image Panel. Then set the width of the Image to the height of the Image Panel / the height of the Image * the width of the Image. In this way, the width of the Image is set to keep the aspect ratio unchanged and included in the Image Panel.
3. Move the Text panel to the bottom of the Image Panel and subtract the rounded pixels 6px to ensure that the rectangle color completely fills the rounded corners.
4. Set the size of the scrim as large as the card (the width is the width of the Image Panel and the height is the height of the Card).
5. Move the Buttons to the vertical center of the scrim.
Context widgets interactions
1.Select the Card, set to hide the Context when the Mouse Enter.
2.Group the Card and Context, set to hide it when the Mouse Exit.
Masonry Layout Cards Scrolling interaction
Create the repeater as a dynamic panel, adjust its size, unselect Fit to Content, and right-click to set Scrollbars to Scroll Vertical.
Finally, adjust the background style and add a mobile phone mockup to the interface.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment