Axure Tutorial: Repeaters - Marking and Unmarking Rows
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
There are several functions of marking rows, one is to indicate the selected and unselected states of the item, and the other is to be used for subsequent operations of the item, such as deletion or editing.
Marking / Unmarking Row(s)
To mark one or more rows:
1. Select Mark Rows on the action,
2. Select the repeater that needs to be marked.
3. On the Row option you can choose to mark the current row, mark the specified row, mark all rows, or mark row(s) by rule.
The method of Unmarking rows is the same as the method of Marking rows.
1. Select Unmark Rows on the action,
2. Select the repeater that needs to be unmarked.
3. On the Row option you can choose to unmark the current row, unmark the specified row, unmark all rows, or unmark row(s) by rule.
The following is an example to explain how to mark the rows of the repeater.
Widgets Setup
1. Drag in a box, name it Bg, then drag in a Checkbox, edit its label as Mark Row.
2. Select them, right-click and select Create Repeater.
3. Adjust its style
Add Marking and Unmarking Interactions
Select the Checkbox, set its Selected and Unselected events:
1. Mark the current row of the repeater.
2. Set the selected and unselected states of Bg.
Finally, we want to add a selected style to Bg, so that the selected style will be displayed when marking.
Preview the Prototype
In the preview prototype, you can see that when the checkbox is checked, the current row will be marked and its style will be changed.
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
That's all for today's lesson. Next lesson we will introduce how to sort rows.
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! ❤
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment