Axure Promotion · Axure RP · Axure Tutorial · Card · Elementary · Learn axure · Repeater · Jan 10, 2022

Axure Tutorial: Card Making - Repeater Elementary Tutorial

by WELLJOE

Introduction

The types of cards are ever-changing, but they are all repeats of basic types. Making cards through repeaters is also a good way.

Features to be Realized

Make grid layout cards through repeaters.

How to Realize these Features

By converting the card widget into a repeater and setting the properties of the repeater.

Preview the completed prototype for this tutorial

Widgets Setup

Widgets setup

1. Drag the controls to the canvas, a picture, a header label, a body label, two buttons, and a rectangle.

create repeater

2. Select all controls, right-click and select Create Repeater.

Data Binding

1. Populate the data into the repeater's data table. Note that when filling in the image data, right-click the table cell and select Import Image. Here we fill in 9 Lines of data, that is, 9 cards.

3 Row, 3 column

2. Then select Vertical, check Wrap, and fill in 3 in the text field of Items per col, so that the layout of 3 rows and 3 columns can be realized.

3. Then fill in row spacing and column spacing to realize the spacing between cards.

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.