[Transfer] AxureRP8 actual combat manual-case 2 (text box: the border changes color)

AxureRP8 actual combat manual-case 2 (text box: the border changes color)

 AxureRP8.0 tutorial small building to listen to Spring language one night  4 years ago (2016-06-11)  34967 ℃  0 comments    

Case 2. Text box: the border changes color

Case source:

Baidu-login interface

 

Case effect:

• When the cursor enters the text box: (Figure 1-6)

Case description:

In the login interface, there are input boxes for username and password. When the focus enters the input box, the frame and internal icon of the input box become blue; when the focus is lost, it returns to gray.

 

Component preparation:

• On the page: (Figure 1-7)

Contains naming:

• Rectangle (for account input border): Border01
• Rectangle (for password input border): Border02

 

Thinking analysis:

• The style of the input box can be switched in two different states, which can be achieved through the interactive style; (operation step 1)
• When the text box gets the focus, the selected style is presented (operation steps 2 ~ 3);
• When the text box loses focus, it presents an unselected style (operation steps 4 ~ 5).

 

Steps:

1. Set the interactive style of the components "Border01" and "Border02" to be light blue border and text; (refer to "Basic 23")

2. Set the account input text box [when focus is obtained], [select] the component "Border01";

• Event interaction settings: (Figure 1-8)

• Use case action settings: (Figure 1-9)

3. Refer to the previous step and set the password input text box [when obtaining focus], [check] the component "Border02";

4. Set the account input text box [when the focus is lost], [uncheck] the component "Border01";

• Event interaction settings: (Figure 1-10)

• Use case action settings: (Figure 1-11)

5. Refer to the previous step, set the password input text box [When the focus is lost], [Uncheck] the component "Border02".

 

Additional notes:

• In this case, the "input box" refers to a group of content composed of a rectangular border and a text box, not a text box component.
• In this case, the "FontAwesome4.4.0" icon font component library is used. You need to install the font file support and set the Web font. (Refer to the supplementary explanation of case 1)

  Special reminder: Please download the related materials of this tutorial from the [Online Reading] page in the navigation menu.

 

Reprinted please specify: Axure original tutorial network  »  AxureRP8 actual combat manual-case 2 (text box: border color change)