Axure Case: Make Tag Inputer and Tag Selector with Repeater
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
When we use various app or web pages, we often have to find the content. The content filtering can be carried out by selecting labels. For example, when registering a new app, we will be allowed to choose tags of interests and hobbies. We can also customize our own tag. Today, let's learn how to make label inputer and selector.
Features to be Realized
1. When the bottom tag is selected, the top tag container show the selected tag. When the bottom tag is unselected, the top tag container hides the selected tag.
2. When clicking the close icon of the selected tag in the top tag container, hide the selected tag and unselect the corresponding tag at the bottom.
3. After entering text in the input box of the top tag container, press enter or return key to add a responding tag to the top tag container.
How to Realize these Features
1. Make selectable tags and selected labels through 2 repeaters. When the unselected tag at the bottom is clicked, the tag at the bottom is selected, and the corresponding row is added to the repeater at the top. When the selected tag at the bottom is clicked, unselect the tag at the bottom and delete the corresponding row in the repeater at the top.
2. When the close icon is clicked, the row at the top is deleted and the corresponding row of the repeater at the bottom is unselected.
3. After entering the text in the input box at the top, press enter or return key to add the corresponding row to the repeater at the top.
Preview the completed prototype for this tutorial
Widgets Setup
1. The top repeater includes a button and a close icon and a text field. The close icon and text field need to be set to move to the corresponding position when loaded. The repeater only needs one column and deletes all data. Create all widgets as a dynamic panel and uncheck fit to content.
2. The repeater at the bottom needs two columns: Name and Selected. Sets the selected style for the bottom tags.
Interactions Setup
Bottom Repeater Tag Settings
Bottom Repeater Tag Settings
When each item of the repeater is loaded, if the number of visible items is 0, the repeater is hidden.
Move the input to the + 8 position on the right side of the repeater.
Input box Settings
When the key is pressed, if the inputed text is not empty and the key is Enter or Return, the top repeater adds a row of inputed text.
In this way, all the settings are completed. 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! ❤
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.
Leave a comment