The two bracketed expressions will be replaced by the number of the repeater's visible page and its total page count respectively in the web browser. The text in the area should now read: Page ] of ] Highlight the 3 and click Insert Variable or Function again. The text in the area should now read: Page ] of 3 Then, click Insert Variable or Function and select pageIndex under Repeater/Dataset in the list that appears.
In the top area of the dialog, highlight the 1 in of 3.
Select the label widget in the Target dropdown.Ĭlick the fx icon to the right of the Value field to open the Edit Text dialog. In the Interactions pane, hover over the Set Text action under the Item Loaded event and click the Add Target button that appears. Display the Current Page Number and Total Page Countīack in Axure RP, drag a label widget onto the canvas and place it below the repeater. You should see the first three items of the repeater displayed.Ĭlick the right arrow to see the next three items, and click it again to see the final three.Ĭlick the left arrow to go backward through the items.ĥ. Set the Current Page When the Arrow Widgets Are Clicked This will separate the repeater's nine items into three pages of three items each, and the repeater will load in the web browser displaying the first page of items.ģ. Select the repeater and check Multiple pages in the Pagination section at the bottom of the Style pane.Įnter 3 in the Items per page field and leave the starting page as 1. Drag a left arrow and a right arrow onto the canvas and place one on each side of the repeater. In the Libraries pane, switch to the Icons library and use the search field at the top-left of the pane to search for arrow.
In the Style pane, add six new rows to the repeater's dataset, filling in the numbers 4 through 9 in Column0. Open a new RP file and open on the canvas.
#USING REPEATERS IN AXURE RP ONLINE COURSES HOW TO#
You'll also learn how to switch between pages in the repeater via the Set Current Page action as well as how to display the page number and the total page count using the Repeater.pageIndex and Repeater.pageCount properties.Ĭlick here to download the completed RP file for this tutorial. In this tutorial, you'll learn how to paginate repeater widgets to separate their items into multiple "pages" on the canvas.
0 kommentar(er)
