Use ivx step article container of lessons learned

Article step is a common form of navigation, the flow of processing in a variety of visible everywhere, such as resetting the password, online shopping process and the like. ivx has been expanding its packaged as a component, it is today to talk about how to use it.
Here Insert Picture Description
Here Insert Picture Description
1.demo structure
demo in the main content in a banner, exactly three container rows 3 divided portions. Line 1 is the step of placing the container strip, it is placed in two rows and two operating button assembly step strip container. steps can be seen as a line of text marked line, so that the main step is the name corresponding to the following steps good bar assembly, the internal row 1, row 2 of several rows between components are filled as text.
Here Insert Picture Description
Article Step 2.
Step strip is an extension of the component, adding position as shown in FIG. Select the step bar and then opening the container can be added to expand the assembly step Article in step strip container.
Here Insert Picture Description
Step strip container is selected, the current step value of this attribute is a numerical variable, but starting from 0. The size may be provided between the width and height of the icons, and icons.
Here Insert Picture Description
Open the following effects centered, before the first step is to give the strip after the last step and also adds a strip spacing. Further control may be horizontal or vertical bar display step.
Here Insert Picture Description
Here Insert Picture Description
The current state there are five steps, step before the current step is the step has been completed, although it may be set to five different states, but most of the cases successfully logical choice more appropriate.
Here Insert Picture Description
Select properties of each step can see step article strips, may be provided the title, descriptive text and an icon (step article if the container is provided with a direction perpendicular to the title and description text will appear on the right). The current status of each step bar can also be set is waiting for, is being processed, errors, and successfully completed five states, but most chose to default.
Here Insert Picture Description
3. Use a logical step article container
should first point out that whether it is a step article container or its internal step bars are not a trigger event, we can only be set up step by strip container or inside other components (such as buttons) step strip property to change its display.
Here Insert Picture Description
In the demo, the current step is step binding strip container is an initial value of a numeric variable "steps" of the result of subtracting the value of 1, then the step of controlling the strip container which step by changing the value of "steps" of.
Here Insert Picture Description
When we click the button "Next Step" to the value of the variable "steps" plus 1, step proceeds to the next strip container, click the button "Bcak", the "steps" minus 1, the step returns to the previous step the container.
Here Insert Picture Description
Here Insert Picture Description
When we proceed to Step 4. Click "Next Step", "steps" 5 plus 1 becomes, at this time all Step strip container is completed, click "steps" can not be a plus 1 and to prompt the user, Therefore, prior to the operation of "steps" limitations plus 1 to the condition in steps = <4.
Here Insert Picture Description
Similarly, when the user is the first step, click on the "Back" button, no longer on the "steps" of the operation minus 1 and also prompts the user. Thus "steps" Save operation is limited in steps 1 Conditions> 1.
Here Insert Picture Description
Summary
step article itself is relatively simple to use, just talk about the state of the Fifth Step strip bar. Step bars show has ended is no doubt that the state should be successful and the current state of the step after step should be no doubt are waiting, so the most important thing is the status of the current step bar. If the password is top of these situations, each process time is very short, the success of the previous step, naturally, we can enter the next step in the process, but if the buyers online shopping and delivery between the buyer to confirm receipt of the a long interval, which we should let the current step in a state of waiting. Under review and to submit such information on a situation, when we submit to complete the operation it is already over, but the results of the audit is unknown at this time choose to complete state clearly more appropriate. When the audit results are returned, then allows users to display success or failure of subsequent processing. Finally, add the five states of the corresponding parameter if you want to perform data binding words.
Here Insert Picture Description

Guess you like

Origin blog.51cto.com/14556317/2481358