Axure 9 actual combat case, repeater application 2, alternate color and hover color of the list

---

Preface

Hello! Welcome to the Axure 9 practical case column (advanced article). Course Introduction>>

In the last tutorial, we explained how to use the repeater to draw the prototype list page (learn more >>) , I believe you have already used it? Is it fun and time-saving?

In this article, we continue to bring the repeater tutorial, let's learn together how to implement alternate colors and hover colors in the repeater list.

Complete the rendering

Let’s take a look at the rendering of the APP list page first. You can see that the color interaction of the list page mainly includes:
①Every other line of the list is displayed in light gray, showing a zebra pattern;
②Move the mouse to a certain line, the line is light Blue hover color.

Draft list

In order to save time, here we have prepared the first draft of the list in advance. (Note: The title row of the list can also be integrated into the repeater, that is, add a title to the first row of the data, but you can’t set a separate background color for the title row. If you pursue high-fidelity prototyping, you usually The title row is independent; in addition, some fixed elements can be directly added to the list without adding to the data, such as the <Delete> button in the figure.)

Let's explain to you how to realize the alternate color and hover color of the repeater.

Step 1: Set the alternate color of the repeater list

First select the repeater list, and in the style on the right column, check the alternate color in the background; then click on the color to open the color setting pop-up window, and set the background color to white (the default is transparent); then click on alternate to continue opening Color setting pop-up window, set the alternate color to light gray (the default is transparent).

Select the repeater list, and then check the alternate color

Click on the color to open the color setting pop-up window and set it to white

Click Alternate to open the color setting pop-up window and set it to gray

The setting of this step is relatively simple, as long as you know the location and setting method of the options, you will learn it. The common list background color is white (#FFFFFF), and the alternate color is light gray (such as #FAFAFA).

Step 2: Set the hover color of the repeater list

Before demonstrating how to set the hover color, we need to explain one thing in advance, that is, when drawing the repeater list, we need to use rectangles instead of tables. Because the table can't achieve continuous mouse hovering effect, to put it bluntly, it will only change color when hovering for the first time, and there will be no effect when you move the mouse again (as shown in the figure below).

The hover effect of the repeater table

Back to the topic, first double-click the repeater to enter the editing state, select all the rectangles, in the interaction on the right column, click <Add an interaction style similar to "mouse hovering">, and then click <mouse hovering in the menu Style>, check the fill color, and then click the color block on the right to open the color setting pop-up window, and set the hover color to blue.

Select all the rectangles of the repeater, and then click <Add an interaction style similar to "mouse hovering"> in the interaction on the right column

Click <mouse hovering style>, check the fill color, and then set the hover color to blue

Then keep all the rectangles selected, set to group, combine all the rectangles, and then in the interaction on the right column, check the <trigger internal component mouse interaction style> (this item is the key, and the relay can be finally realized after checking. The hovering effect of the list row of the monitor).

Combine all the rectangles, and then check the <Trigger internal component mouse interaction style>

Conclusion

OK, through the above two simple steps, you can set the alternate color and hover color for the repeater list; if you still don’t understand, you can download the courseware at the end of the article to continue learning.

Practice draft effect

Related Courseware

In order to help students to quickly understand and practice Axure cases, each tutorial in this column will provide RP format courseware download.

Link: https://mosi.lanzous.com/b01i339vg
Password: bxw6

(@默林如斯 Originally produced, reprinting without permission is prohibited, infringement must be investigated)

"Axure 9 Case Tutorial-Advanced": Explain the advanced operation of Axure 9 from the perspective of actual combat cases, help you learn the high-interaction design of product prototypes from the case, and help you quickly improve your actual combat capabilities! Suitable for students who are ready to advance in Axure! (Axure courseware provided)
All advanced tutorials: https://blog.csdn.net/congzi530/category_10760486.html