Axure Tutorial: Card Page Switching — Repeater Elementary Tutorial

Introduction

Card page switching is also a frequently used feature in the UI/UX design. We use the content produced in Axure Tutorial: Card Making — Repeater Elementary Tutorial to start our tutorial.

Features to be Realized

1. Make cards through repeaters. When you click the previous Page button, the card turns to the previous page. When you click the Next Page button, the card turns to the next page.

2. When the card is the first page, the previous Page button is disabled. When the card is the last page, the Next Page button is disabled.

How to Realize these Features

1. Set the data of the repeater to multiple pages, and 2 acts as one page. When you click previous page, turn to the previous page. When you click next page, turn to the next page.

2. Judge the current number of pages of the repeater. If it is the first page, disable the previous Page button. If it is the last page, disable the Next Page button.

Preview the completed prototype for this tutorial

Widgets Setup

Select Horizontal in layout, check Wrap, and fill in 2 items per row. Fill in 2 in Items per page. In this way, the card can be changed to 2 items per row.

Interactions Setup

1. Select the previous Page button and select jump to the previous page in the action.

2. Similarly, select the Next Page button and select jump to the next page in the action .

3. When each item is loaded, disable the previous page button if it is the first page, and disable the next page button if it is the last page. In other cases, enable both buttons.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store