Use the tab navigation ivx implement lessons learned

The tab navigation similar content can be carried out separately and merge different block area, make full use of limited space, to achieve a more principled, more concise page layout, commonly used in the news pages, and other electricity providers Products need to be classified to show the scene. Today say about how to achieve this effect.

1. First, the entire page will be divided into two parts, the upper row label for displaying, the following line for displaying the specific content of each tab.

2. We then create a loop tag in the tag line, data sources that we have completed a one array. for contents of the text component in the container 1 can bind directly to this data, and the text color and background color data binding using ternary expressions, purpose is to make the selected text display component can be distinguished.

3. Next to the text component is in the container for added events, whenever we click on the text component, that is to select the label, the label serial number value assigned to the value of the variable "check the serial number."

4. The final step is to design the content of the line, because an array "Data Labels sources" in the five elements, so it is designed to show portions of five to one correspondence with the label, if they were put into five containers, judge the condition is that tag name display portion corresponding to the numerical number in an array variable "check numbers" are equal, so that at any time only one condition is satisfied if the container, if it was only a part of the vessel is visible impressions of.

The expansion assembly - a container tab
ivx in fact, a component may be used to achieve such expansion effects, i.e., the container tab.

Tab container as a container for all the parent assembly tabs may be provided to the style label position and font attributes. Each tab is equivalent to a small page, we are free to add a variety of layout components.


Summary
customize a navigation tab features the most important is to establish contact with the display portion of the label section, showing part of the display can be switched to the right post content that is selected label. There are many custom approach can change parts, such as the demo we do not add that much if the container can be directly demonstrated to five parts, namely five absolutely positioned container visible property data binding, so that the final effect is the same of.