Have you ever had such a problem: every time you draw a prototype and encounter a tab type, you need to set the click effect for each tab button before you can switch the dynamic panel below? Here is a recommended solution for you, using a repeater to achieve a "silky" tab switching effect.
Preview address: https://v4qyac.axshare.com
1. Preliminary preparations
Prepare a repeater first, and change the layout of the repeater to horizontal (as shown in the figure).
Then add a dynamic panel underneath the repeater. This effect requires a total of 3 states, and a line of text (Tab_1, Tab_2, and Tab_3) can be added to each dynamic panel to confirm the completion of the switching effect (as shown in the figure).
In the repeater, change the name of the default column to name, and add the select, Tab_number columns.
The data in the repeater is added according to the screenshot below (as shown in the figure).
name is the name of the tab, select is used to set the selected state of the tab item (the default preference is selected), and Tab_number is used to toggle the dynamic panel.
2. Interaction design
1. Click Settings for Effects
Double-click the repeater, set the rectangle in the repeater to 100*32, remove the border, change the font size to 16, change the font color to gray (to distinguish it from the selected effect), and add the interaction style selected by the component to the rectangle, and set the font color to black (as shown in the figure).
Whether the selected tab item is selected or not is determined by the select value in the repeater, so when you click each item, you need to update and modify the select value:
- When adding a click to a rectangle, the repeater updates the action of the row (the property is: marked, select column, and the value is 0), because only one tab can be selected at a time, so you need to clear the value in the select first;
- Re-assign the select value of the current item, and continue to add the action of the repeater to update the row (the property is: current, select column, and the value is 1) (as shown in the figure);
If you do this, you will have a preliminary effect on the click. Of course, you can't see the actual effect when you preview it now. Next, let's continue to optimize.
2. Set the current item to the selected state
As mentioned earlier, whether it is selected or not is determined by the select value in the repeater, so the next step is to set up the interaction of the repeater.
Because when each item is loaded, we need to know whether the item is selected or not, so we need to use the events for each item loaded here:
First, let's set the selected state and add a case for each load event: the action that is executed when the value of select is 1 (as shown in the figure).
In this way, we get the item loaded to the select value of "1", and then set the mark line (target: current repeater, line: current), set the text content to [[Item.name]], and set the selected rectangle to "true" (as shown in the figure);
Then set the unchecked state, and add another case for each load event: when the select value is "0", the action that is executed (as shown in the figure), of course, the conditions in this case can also be set without setting.
Next, set actions for items with a value of "0": mark the line (target: current repeater, line: current), set the text content to [[Item.name]], and set the selected rectangle to "false" (as shown in the figure);
At this point, we get a Tab tab that can be toggled with a click effect, but we can see that the dynamic panel below is still switching, so let's continue to set it up.
3. Dynamic panel switching
The dynamic panel needs to follow the effect of each click and switch the status. Then go back to the click event on the rectangle, and add the set panel state action (target: dynamic panel, value: [[Item.Tab_number]]] (as shown in the figure);
At this point, we have completed the use of repeaters to achieve the tab switching effect.
Save this solution as your own component library, and then when you encounter a prototype related to tab switching, you can modify the size of the rectangle, the number of items, and the size of the dynamic panel, and then you can use it directly, and you don't have to click to switch the dynamic panel for the button!
In the demo, I added a bar that follows the click to move. If you want to know about the implementation of the horizontal bar movement effect or want to download this component, you can leave a message at the end of the article.
This article was originally published by @阿幸 on Everyone is a Product Manager and is not allowed to be reproduced without permission
The title image is from Unsplash and is licensed under CC0
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.