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.