How to judge the content of input box and light up different icons in Axure prototype

The search box is used to quickly filter out the content users want, and display the relevant content in real time according to the user’s input content. This kind of user experience is excellent. < / P > < p > today, I’d like to share with you a tutorial on how to display and light up different charts according to the content of the input box. Look at the old rules and see the final effect. < / P > < p > first of all, we import three icon files in the scene, and define the names as F, G and l, corresponding to f = Facebook, g = GIT and L = linkdin respectively. By default, we change the image to the same color 000080, and the display effect is as shown in the following figure: < / P > < p > because we want to make the effect of lighting the corresponding icon according to the input content, we need to change the transparency of the three charts to 30%, and the display effect is as shown in the following figure: < / P > < p > next, we need to add an input box in the scene To light up the icon. In order to be more beautiful, I set some styles for the input box in the scene. < / P > < p > in the final effect, we can see that the input box is displayed by default: Please enter a keyword. When there is content in the input box, the prompt disappears. How is the effect made? In fact, it’s very simple. You can set it through the properties of the input box. < / P > < p > at the same time, we need to set the visibility of the border to only keep the bottom edge. What should I do? In the figure below, you can see that the top, left and right sides have been canceled. When the input box is not Facebook or git or LinkedIn, all the icons will be translucent. < / P > < p > we select the input box to add interactive actions. First, we add the “when text changes” action First, we set the Facebook icon first, so we select “F” as our target, and then set the opacity as “100”. < / P > < p > the function of this setting is: when the text of the input box changes, the transparency of Facebook becomes 100. But when the input box text becomes what value, activate Facebook transparency? < / P > < p > here we need to introduce a new knowledge point: enable case. The function of enabling situation is like a judgment condition. We need to add a judgment condition for Facebook. When Facebook is entered in the input box, the effect of transparency change will be activated. < / P > < p > after clicking “enable situation”, the configuration page will pop up. Let’s set it. Here we need to set the component text equal to Facebook, and the final result is shown in the figure. After setting, click OK. < / P > < p > let’s take a look at the current effect. We can see that the first icon is lit when we input Facebook. We use the same method to configure the other two icons. < / P > < p > but I don’t know if you have found a problem. When we delete the word Facebook, the icon doesn’t go out and is still on? This is because we only set the setting to light up the icon when the value of the input box is the specified value, but we do not set the setting to turn off the icon. < / P > < p > we also need to set the configuration to turn off the icon when the value of the input box is not equal to Facebook, GIT or LinkedIn. Let’s take a look at the final configuration. Continue ReadingASMC, a lithography maker, was one of TSMC’s 14 top suppliers last year